Dashboards & Visualizations

Checkbox horizontal Value alignment

ronpestler1
Explorer

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?

1 Solution

niketn
Legend

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.

alt text

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

View solution in original post

niketn
Legend

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!!!"
0 Karma

niketn
Legend

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.

alt text

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

ronpestler1
Explorer

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

0 Karma

niketn
Legend

@ronpestler1, glad it worked 🙂

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

mrccasi
Explorer

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.

0 Karma

infrastructure_
Explorer

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">
0 Karma

chiennylin
New Member

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

0 Karma
Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...