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
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Introducing ITSI 5.0: Unified Visibility and Actionable Insights

Introducing ITSI 5.0: Unified Visibility and Actionable Insights Tuesday, July 21, 2026  |  10:00AM PT / ...

Inside Splunk Agent Observability: Understanding Agent Behavior, Tokens & Costs

Inside Splunk Agent Observability:Understanding Agent Behavior, Tokens & Costs Thursday, August 06, ...

From Data to Insight: Announcing the Winners of the Splunk Dashboard Contest

Hi Splunkers, First off, thank you to everyone who participated in our very first From Data to Insight: The ...