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!

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas

Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas     Cisco Live 2026 is almost here, and this ...

What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)

Hello Splunkers,   So you searched, “what is the name of the usb key inserted by bob smith?”  Not gonna lie… ...

Automating Threat Operations and Threat Hunting with Recorded Future

    Automating Threat Operations and Threat Hunting with Recorded Future June 29, 2026 | Register   Is your ...