Dashboards & Visualizations

How to break up groups of <input> elements onto their own lines?

bowesmana
SplunkTrust
SplunkTrust

I have a group of 'filters' in a dashboard that I can add to or remove from. A filter comprises 3 fields

  • Dropdown containing field names
  • Selector indicating comparison type
  • Data containing value

I want a SINGLE panel where these 3 fields are displayed horizontally - simple

I'm looking for CSS to solve this particular problem:

I want to be able to add a new filter set on a separate line below the first one, in the same panel, not on a new row. This is the single group, but I want to have other groups of inputs that are conditionally show using token depends.

Normally inputs will travel horizontally across the screen, so the 4th input would then be to the rights of the data_f_1 field below. How can I get the CSS to force any input with id of f_* to break to a new line, so it's left aligned in the panel?

 

  <row id="filter_selector_row_1" depends="$f_1$">
    <panel>
      <input id="f_1" depends="$f_1$" type="dropdown" token="field_f_1" searchWhenChanged="true">
        <label>Field</label>
        <fieldForLabel>label_name</fieldForLabel>
        <fieldForValue>field_name</fieldForValue>
        <search base="object_list">
          <query></query>
        </search>
        <change>
          <eval token="filter_1">$field_f_1$$selector_f_1$"*$data_f_1$*"</eval>
        </change>
      </input>
      <input depends="$f_1$" type="dropdown" token="selector_f_1" searchWhenChanged="true">
        <label>Selector</label>
        <choice value="=">Equals</choice>
        <choice value="!=">Not Equals</choice>
        <initialValue>=</initialValue>
        <change>
          <eval token="filter_1">$field_f_1$$selector_f_1$"*$data_f_1$*"</eval>
        </change>
      </input>
      <input depends="$f_1$" type="text" token="data_f_1" searchWhenChanged="true">
        <label>Data</label>
        <change>
          <set token="filter_1">$field_f_1$$selector_f_1$"*$data_f_1$*"</set>
        </change>
      </input>
    </panel>
  </row>

 

 

Labels (2)
0 Karma
Get Updates on the Splunk Community!

Splunk Decoded: Service Maps vs Service Analyzer Tree View vs Flow Maps

It’s Monday morning, and your phone is buzzing with alert escalations – your customer-facing portal is running ...

What’s New in Splunk Observability – September 2025

What's NewWe are excited to announce the latest enhancements to Splunk Observability, designed to help ITOps ...

Fun with Regular Expression - multiples of nine

Fun with Regular Expression - multiples of nineThis challenge was first posted on Slack #regex channel ...