Dashboards & Visualizations

Alignment of link list on dashboard

piukr
Explorer

Hello,

I use the following grid structure to define source and destination filters in one of my dashboards. I would like to add a button to each panel to reset the content of the input text box, however I am struggling to create the CSS code to align the link list input correctly. I would like to move them to the top-right corner of the wide input panels (the position is highlighted with a red box on the screenshot).

Could someone please help me write the correct CSS code which would align the button correctly?

Dasboard alignment of link input.png

I have added a run anywhere dashboard with the CSS scripts included.

<form theme="dark">
  <label>Dashboard CSS Alignment Example</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel id="inputFilterFirstColumnRow1">
      <title>Filters</title>
      <html/>
    </panel>
    <panel id="inputFilterSecondColumnRow1">
      <input type="link" token="tokClearSrcFilter" searchWhenChanged="true" id="button_clear_src_filter">
        <label></label>
        <choice value="clear_src_filter">X</choice>
        <change>
          <condition value="clear_src_filter">
            <unset token="tokClearSrcFilter"></unset>
            <unset token="form.tokClearSrcFilter"></unset>
            <set token="tokSrcFilter">*</set>
            <set token="form.tokSrcFilter">*</set>
          </condition>
        </change>
      </input>
      <input type="text" token="tokSrcFilter" searchWhenChanged="true" id="wideInputBox_SourceFilter">
        <label>Source Filter</label>
        <default>*</default>
      </input>
    </panel>
    <panel id="inputFilterThirdColumnRow1">
      <input type="link" token="tokClearDestFilter" searchWhenChanged="true" id="button_clear_dest_filter">
        <label></label>
        <choice value="clear_dest_filter">X</choice>
        <change>
          <condition value="clear_dest_filter">
            <unset token="tokClearDestFilter"></unset>
            <unset token="form.tokClearDestFilter"></unset>
            <set token="tokDestFilter">*</set>
            <set token="form.tokDestFilter">*</set>
          </condition>
        </change>
      </input>
      <input type="text" token="tokDestFilter" searchWhenChanged="true" id="wideInputBox_DestinationFilter">
        <label>Destination Filter</label>
        <default>*</default>
        <initialValue>*</initialValue>
      </input>
    </panel>
  </row>
  <row depends="$alwaysHideCSSStyleOverride$">
    <panel>
      <html>
        <style>
          /* Wide text input box style. Use id="wideInputBox_unique_id" in the input header */
          
          div[id^="wideInputBox"] .splunk-textinput {
            min-width: 20vw !important;
            width: 40vw !important;
            max-width: 40vw !important;
            color: yellow;
          }
          div[id^="wideInputBox"] .splunk-textinput input[type="text"] {
            min-width: 20vw !important;
            width: 40vw !important;
            max-width: 40vw !important;
            color: yellow;
          }
        </style>
        <style>
          /* This section sets the width of the three columns of secondary filter panels - 10% - 45% - 45% */
          div[id^="inputFilterFirstColumn"]{
            width:10% !important;
          }
          div[id^="inputFilterSecondColumn"]{
            width:45% !important;
          }
          div[id^="inputFilterThirdColumn"]{
            width:45% !important;
          }
        </style>
        <style>
          /* Clear Button positioned to the right side of the panel */
          
          div[id^="button_clear"]{
            width:20px !important;
            float: right;
          }
          div[id^="button_clear"] button[data-test="option"]{
    
              flex-grow: 0;
              border-radius: 2px;
              border-width: thin;
              border-color: lightgrey;
              border-style: inset;
              width: 20px;
              padding: 2px 2px;
          }
          div[id^="button_clear"] label{
            display:none;
          }
          div[id^="button_clear"] span[data-test="label"]:hover{
    
          }
          div[id^="panel"].fieldset{
            padding: 0px;
          }
        </style>

      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>
| makeresults
| eval src=$tokSrcFilter|s$, dest = $tokDestFilter|s$
| table src, dest
          </query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

 Regards

Labels (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

Try adding this style

          div[id="inputFilterSecondColumnRow1-fieldset"],
          div[id="inputFilterThirdColumnRow1-fieldset"] {
            width: inherit !important;
          }

View solution in original post

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try adding this style

          div[id="inputFilterSecondColumnRow1-fieldset"],
          div[id="inputFilterThirdColumnRow1-fieldset"] {
            width: inherit !important;
          }
0 Karma

piukr
Explorer

Thank you, this works perfectly!

Regards

Tags (1)
0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...