Archive

How to Horizontally align the radio button in Splunk dashboard

Path Finder

We are having many input fields to render visualizations in dashboards.Is there any to customize the radio input horizontally to have a better look and feel.

Thanks

New Member

vnravikumar's answer was good for the alignment of the radio buttons, but didn't make the text and radio button aligned, leading what looked like the text being aligned vertical-top and the radio button vertical-bottom. Now that Splunk has large components of the CSS in flexboxes, the following CSS works well in my Splunk instance (7.1.4, but assuming it'll work in more recent versions too):

#exampleRadioId1 div {
  flex-flow: row wrap;
}

#exampleRadioId2 div {
  flex-flow: row wrap;
}

.splunk-radiogroup label {
  padding-right: 5px;
}

.splunk-radiogroup is still an inline-block (inside the flex-box) and so needs to have a single change made to it to have the padding between buttons the same as the padding between an individual radio button and the text aligned to it - it can be increased to 10px or more if you desire.

0 Karma

Champion

Hi

Try this to align horizontally

Splunk 7.2.4

<form>
  <label>test</label>
  <fieldset submitButton="false">
    <input type="radio" token="app_type" searchWhenChanged="false" id="radiosample">
      <label>Color</label>
      <choice value="red">Red</choice>
      <choice value="blue">Blue</choice>
      <choice value="green">Green</choice>
      <choice value="black">Black</choice>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
        <style>
          #radiosample div[data-test="radio-list"]{
           display: inline;
          }  

          #radiosample div[data-test="option"]{
            display: inline;
            margin-top: 0px;
            margin-right: 10px;
            margin-bottom: 0px;
            margin-left: 0px
          } 
          #radiosample {
            width:30%;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

Splunk 6.6.6

<form>
   <label>test</label>
   <fieldset submitButton="false">
     <input type="radio" token="app_type" searchWhenChanged="false" id="radiosample">
       <label>Color</label>
       <choice value="red">Red</choice>
       <choice value="blue">Blue</choice>
       <choice value="green">Green</choice>
       <choice value="black">Black</choice>
     </input>
   </fieldset>
   <row depends="$hide$">
     <panel>
       <html>
         <style>
           #radiosample .choice{
            display: inline;
           }  
         </style>
       </html>
     </panel>
   </row>
 </form>

Short of putting them into empty panels, is there a way to have two separate radio button groups be horizontally displayed on top of each other?

0 Karma

New Member

I've just been inserting a <html><br/></html> between horizontal rows.

0 Karma

Sweet - Thanks for your help. Cheers!

0 Karma

Builder

@vnravikumar Thank you for trying! I can't get it to work in v6.6.6. I even tried the following style in both an existing dashboard and using your full example code:

<style>
           #radiosample div[data-test="radio-list"]{
            display: inline !important;
           }  

           #radiosample div[data-test="option"]{
             display: inline !important;
             margin-top: 0px !important;
             margin-right: 10px !important;
             margin-bottom: 0px !important;
             margin-left: 0px !important;
           } 
           #radiosample {
             width:30% !important;
           }
</style>
###

If this reply helps you, an upvote would be appreciated.
0 Karma

Champion

Hi

The above sample will work in 7.2.4

0 Karma

Champion

I will let you know for v 6.6.6

0 Karma

Champion

@efavreau, I had posted sample code above for 6.6.6, please try and let me know

Builder

@vnravikumar SUCCESS! This isn't my question, or I'd accept the answer. I did upvote it. Thank you!

Here's what I ended up with:

 <style>
   #radiosample .choice { //* change it to horizontal *//
    display: inline !important;
   }  
   #radiosample .splunk-radiogroup .choice { //* adds 20 pixels to uncramp the choices *//
    margin-right: 20px !important;
   }
   #radiosample .splunk-radiogroup-choices { //* Moves the binding box out to provide enough room for my choices *//
    width: 2600px !important;
   }
   .hide-global-filters { //* hides the "Hide Filters" toggle, rather than fix it. *//
   visibility: hidden !important;
   }
 </style>
###

If this reply helps you, an upvote would be appreciated.
0 Karma

Motivator

This is something so basic it should definitely be included as a default simpleXML option...