Dashboards & Visualizations

What css is applied to a selected input link in simple XML?

alhoctamis
Explorer

When using input link, the default selected input appear like this:

screen1.png

Then, when you select any of them, it gets like this:

screen2.png

I would like to apply the css style of a selected input link button to the default when loading the dashboard.

I can play with tokens to do this, I just cannot find the applied css.

I know it might be found be inspecting the page somehow, but I cannot locate it.

I have this run anywhere example:

<form>
  <label>TEST</label>
  <row>
    <panel>
      <html>
        <style>
          #button button{
            background-color: #F7F8FA !important;
            margin-right: 10px;
          }
          .dashboard-panel,
          .panel-body.html{
            background: #F2F4F5 !important;
          }
        </style>
        <center>
            TEST
        </center>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <input id="button" type="link">
        <label></label>
        <choice value="A">A</choice>
        <choice value="B">B</choice>
        <default>A</default>
        <change>
          <condition value="A">
            <set token="show_pabel_a">true</set>
            <unset token="show_pabel_b"></unset>
          </condition>
          <condition value="B">
            <unset token="show_pabel_a"></unset>
            <set token="show_pabel_b">true</set>
          </condition>
        </change>
      </input>
      <single depends="$show_pabel_a$">
        <search>
          <progress>
            <condition match="'job.resultCount' &gt; 0">
              <set token="show_panel_a">true</set>
            </condition>
          </progress>
          <query>| makeresults
| eval test="A"
| fields - _time</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </single>
      <single depends="$show_pabel_b$">
        <search>
          <progress>
            <condition match="'job.resultCount' &gt; 0">
              <set token="show_panel_a">true</set>
            </condition>
          </progress>
          <query>| makeresults
| eval test="B"</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">none</option>
      </single>
    </panel>
  </row>
</form>

 

Labels (2)
0 Karma

alhoctamis
Explorer

Yes, not clear sorry, and thanks for asking!

I would like to have the focus on the default button when loading the dashboard.

The way 'B' is in the 2nd screenshot, I am trying to have it on default A in the 1st screenshot when opening the dashboard.

I guess if I know what css is applied when focus I would be able to use it this way.

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

There isn't a way to affect which dashboard input has focus except through something like javascript.

0 Karma

alhoctamis
Explorer

I see! Thanks for the help abyhow

Tags (1)
0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

It is not clear what style you are trying to change and when.

If it is the blue box shadow around the button, this is because the button has focus. Is this what you want to change the style of?

Or are you trying to change the style when the button is selected?

0 Karma
Get Updates on the Splunk Community!

Announcing Scheduled Export GA for Dashboard Studio

We're excited to announce the general availability of Scheduled Export for Dashboard Studio. Starting in ...

Extending Observability Content to Splunk Cloud

Watch Now!   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to leverage ...

More Control Over Your Monitoring Costs with Archived Metrics GA in US-AWS!

What if there was a way you could keep all the metrics data you need while saving on storage costs?This is now ...