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!

Developer Spotlight with Paul Stout

Welcome to our very first developer spotlight release series where we'll feature some awesome Splunk ...

State of Splunk Careers 2024: Maximizing Career Outcomes and the Continued Value of ...

For the past four years, Splunk has partnered with Enterprise Strategy Group to conduct a survey that gauges ...

Data-Driven Success: Splunk & Financial Services

Splunk streamlines the process of extracting insights from large volumes of data. In this fast-paced world, ...