Dashboards & Visualizations

Decrease Space Between Checkbox and Submit Button

jason_hotchkiss
Communicator

Hello - 

I would like to decrease the space between the checkbox and the submit button [space between the red].  How might I do that?

jason_hotchkiss_0-1601473377736.png

Thanks in advanced.

Labels (2)
0 Karma
1 Solution

niketn
Legend

@jason_hotchkiss try adding following CSS where id of check box needs to be set as id="checkBoxClear"

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #checkBoxClear[data-view="views/dashboard/form/Input"]{
            width: 100px !important;
          }
        </style>
      </html>
    </panel>
  </row>

By default input fieldset width is  220px, this override reduces by half. Once this works you can move the configuration to a static CSS file under the appserver/static folder of your Splunk app. Refer to documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#dashboard_or_...

You can also refer to Clarafication blog by @cmerriman in case you want to pick up on learning about CSS Extensions in Splunk Simple XML dashboards: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@jason_hotchkiss try adding following CSS where id of check box needs to be set as id="checkBoxClear"

  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #checkBoxClear[data-view="views/dashboard/form/Input"]{
            width: 100px !important;
          }
        </style>
      </html>
    </panel>
  </row>

By default input fieldset width is  220px, this override reduces by half. Once this works you can move the configuration to a static CSS file under the appserver/static folder of your Splunk app. Refer to documentation: https://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#dashboard_or_...

You can also refer to Clarafication blog by @cmerriman in case you want to pick up on learning about CSS Extensions in Splunk Simple XML dashboards: https://www.splunk.com/en_us/blog/tips-and-tricks/splunk-clara-fication-customizing-simplexml-dashbo...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jason_hotchkiss
Communicator

Thank you for this advice.  I was able to get this to work with one small tweak:

<html>
  <p/>

Otherwise everything else worked great.  

0 Karma

niketn
Legend

@jason_hotchkiss that would be because you are running version 7.3.3 which had this as an issue. PS. Once tested you should move the CSS style to a stylesheet so that it is re-usable. Once you do so </p> workaround will not be required. Following is an old answer for reference: https://community.splunk.com/t5/Dashboards-Visualizations/How-to-include-CSS-in-Dashboards-with-the-...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

App Platform's 2025 Year in Review: A Year of Innovation, Growth, and Community

As we step into 2026, it’s the perfect moment to reflect on what an extraordinary year 2025 was for the Splunk ...

Operationalizing Entity Risk Score with Enterprise Security 8.3+

Overview Enterprise Security 8.3 introduces a powerful new feature called “Entity Risk Scoring” (ERS) for ...

Unlock Database Monitoring with Splunk Observability Cloud

  In today’s fast-paced digital landscape, even minor database slowdowns can disrupt user experiences and ...