Solved: Checkbox horizontal Value alignment

ronpestler1 · ‎07-25-2017

Hello together,

i created a dashboard with simple-xml and want a checkbox in top of my other input fields to negate the searches.
For my actually working example i must also hide the first value from the checkbox, this works actually with the solution which i found.
Actually i use Splunk 6.5.3.

Here is a snippet from my simple xml example:

  <row>
    <panel>
      <input type="checkbox" token="input_checkbox" searchWhenChanged="true" id="input_checkbox">
        <label>Checkbox</label>
        <choice value="*">Nothing</choice>
        <choice value="V1">Value1</choice>
        <choice value="V2">Value2</choice>
        <choice value="V3">Value3</choice>
        <delimiter>;</delimiter>
        <default>*</default>
        <initialValue>*</initialValue>
      </input>
    </panel>
  </row>

My actuall dashboard.css looks like this:

div[id="input_checkbox"] {
width: 100% !important;
}

div[id="input_checkbox"]>div>div>div>div:nth-child(1) {
    display:none;
}

But i dont know how i can bring the values horizontal.
Can anybody please help in that case?

niketn · ‎07-26-2017

Apply the following CSS Style to your dashboard with checkboxes.

   <row>
     <html depends="$alwaysHideCSSStyle$">
       <style>
        .control.shared-controls-syntheticcheckboxcontrol.control-default{
          display: inline-block !important;
        }
        #input_checkbox{
          width: 200% !important;
        }
       </style>
     </html>
   </row>

PS: I have increased width of input panel to 200% to accommodate more options horizontally. If options wrap to the next row, you would need to increase it further.

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

View solution in original post

niketn · ‎11-21-2019

Splunk 7.1.x onwards CSS Selectors for inputs have changed. Refer to answer by @vnravikumar and also the one that I have extended for all Splunk inputs for the right CSS selector. (PS: CSS property will remain the same, just the selectors have changed)

https://answers.splunk.com/answers/740606/why-is-the-dropdown-input-width-not-increasing.html?childT...

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

niketn · ‎07-26-2017

Apply the following CSS Style to your dashboard with checkboxes.

   <row>
     <html depends="$alwaysHideCSSStyle$">
       <style>
        .control.shared-controls-syntheticcheckboxcontrol.control-default{
          display: inline-block !important;
        }
        #input_checkbox{
          width: 200% !important;
        }
       </style>
     </html>
   </row>

PS: I have increased width of input panel to 200% to accommodate more options horizontally. If options wrap to the next row, you would need to increase it further.

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

ronpestler1 · ‎08-01-2017

Thank you for your fast answer, it work now, like i want 🙂

niketn · ‎08-01-2017

@ronpestler1, glad it worked 🙂

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

mrccasi · ‎10-17-2019

hi niketnilay,

i have the same problem but this does not seem to work for me. where should i put the html part? i put it before the filter and after the filter but does not work properly.

Thanks.

infrastructure_ · ‎11-21-2019

Old thread, but if someone stumbles upon this:

You have to id the element the css is applied to:

<input id="input_checkbox" type="checkbox" token="tk_columns">

chiennylin · ‎01-14-2020

hi, having the same problem.
Not good with css.
So i added the id, i tried this:

  <title>Bagging by Region</title>
  <input id="region_id" type="checkbox" token="region" >
    <label>Select Region</label>
    <choice value="sum(AM) as &quot;AM&quot;">AM</choice>
    <choice value="sum(AP) as &quot;AP&quot;">AP</choice>
    <choice value="sum(CN) as &quot;CN&quot;">CN</choice>
    <choice value="sum(EU) as &quot;EU&quot;">EU</choice>
    <choice value="sum(SB) as &quot;SB&quot;">SB</choice>
    <choice value="sum(ME) as &quot;ME&quot;">ME</choice>
    <delimiter>,</delimiter>
  </input>
  <html>
    <style>
      .control.shared-controls-syntheticcheckboxcontrol.control-default{
      display: inline-block !important;
      }
      region_id{
       width:auto !important;
      }
    </style>
  </html>

but this is still not working

Checkbox horizontal Value alignment

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

.conf24 | Registration Open!

ICYMI - Check out the latest releases of Splunk Edge Processor