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!

Agent Mode Engaged! Enchaining Agentic Operations with Splunk AI Assistant 2.0

    Are you ready to transform how your team handles complex data requests? We invite you to our upcoming ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

We are excited to announce that the upcoming releases of Splunk Enterprise 10.2.x and Splunk Cloud Platform ...