Dashboards & Visualizations

How to align Submit Button with other Inputs?

ManyQuestions
Engager

So I'm working to implement a clear buttons filter on a simple XML dashboard. I'm unable to do any custom java script so I've been doing all of it within the XML. I have the functionally I'm looking for utilizing a link list input with condition changes to unset the tokens to the default but having issues with my submit button lining back up. No matter what I seem to do I can't get the submit button to come in line with the Clear Filters "button".

If anyone could help me with getting the Submit button in line with my link list input that would be grealtly appreciated. I've have some instance agnostic XML code below so you can see what I'm talking about.

Thanks!

 

 

 

<form theme="dark">
  <label>Clear Filters</label>
  <fieldset submitButton="true">
    <input type="multiselect" token="Choice">
      <label>Choices</label>
      <choice value="*">All</choice>
      <choice value="Choice 1">Choice 1</choice>
      <choice value="Choice 2">Choice 2</choice>
      <choice value="Choice 3">Choice 3</choice>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="link" token="Clearer" searchWhenChanged="true" id="list">
      <label></label>
      <choice value="Clear">Clear Filters</choice>
      <change>
        <condition value="Clear">
          <unset token="form.Choice"></unset>
          <unset token="form.Clearer"></unset>
        </condition>
      </change>
    </input>
    <html>
        <style>
          #list button{
          color: white;
          background: green;
          width:50%;
          display: inline-block;
           }

        </style>
      </html>
  </fieldset>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval Message="Thanks for the help!"
| table Message</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

 

 

 

Labels (3)
Tags (1)
0 Karma
1 Solution

ManyQuestions
Engager

Found the solution the HTML styling for the link list input being placed in the fieldset is what caused the  submit button to move down. Moving the styling into a random search panel allowed the submit button to line back up.

<form theme="dark">
  <label>Clear Filters</label>
  <fieldset submitButton="true">
    <input type="multiselect" token="Choice">
      <label>Choices</label>
      <choice value="*">All</choice>
      <choice value="Choice 1">Choice 1</choice>
      <choice value="Choice 2">Choice 2</choice>
      <choice value="Choice 3">Choice 3</choice>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="link" token="Clearer" searchWhenChanged="true" id="list">
      <label></label>
      <choice value="Clear">Clear Filters</choice>
      <change>
        <condition value="Clear">
          <unset token="form.Choice"></unset>
          <unset token="form.Clearer"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval Message="Thanks for the help!"
| table Message</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
      <html>
        <style>
          #list button{
          color: white;
          background: green;
          width:100%;
          width: 130px !important;
          display: inline-block;
           }
        </style>
      </html>
    </panel>
  </row>
</form>

View solution in original post

0 Karma

ManyQuestions
Engager

Found the solution the HTML styling for the link list input being placed in the fieldset is what caused the  submit button to move down. Moving the styling into a random search panel allowed the submit button to line back up.

<form theme="dark">
  <label>Clear Filters</label>
  <fieldset submitButton="true">
    <input type="multiselect" token="Choice">
      <label>Choices</label>
      <choice value="*">All</choice>
      <choice value="Choice 1">Choice 1</choice>
      <choice value="Choice 2">Choice 2</choice>
      <choice value="Choice 3">Choice 3</choice>
      <default>*</default>
      <initialValue>*</initialValue>
    </input>
    <input type="link" token="Clearer" searchWhenChanged="true" id="list">
      <label></label>
      <choice value="Clear">Clear Filters</choice>
      <change>
        <condition value="Clear">
          <unset token="form.Choice"></unset>
          <unset token="form.Clearer"></unset>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults
| eval Message="Thanks for the help!"
| table Message</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </single>
      <html>
        <style>
          #list button{
          color: white;
          background: green;
          width:100%;
          width: 130px !important;
          display: inline-block;
           }
        </style>
      </html>
    </panel>
  </row>
</form>
0 Karma
Get Updates on the Splunk Community!

Demo Day: Strengthen Your SOC with Splunk Enterprise Security 8.1

Today’s threat landscape is more complex than ever. Security operation centers (SOCs) are overwhelmed with ...

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...