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!

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...

Splunk Community Platform Survey

Hey Splunk Community, Starting today, the community platform may prompt you to participate in a survey. The ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...