Dashboards & Visualizations

How to Horizontally align the radio button in Splunk dashboard

basilarockiaedw
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

jlr
Explorer

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.

vnravikumar
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>

thisemailwillbe
Explorer

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

jlr
Explorer

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

0 Karma

thisemailwillbe
Explorer

Sweet - Thanks for your help. Cheers!

0 Karma

efavreau
Motivator

@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

vnravikumar
Champion

Hi

The above sample will work in 7.2.4

0 Karma

vnravikumar
Champion

I will let you know for v 6.6.6

0 Karma

vnravikumar
Champion

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

efavreau
Motivator

@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

nick405060
Motivator

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

Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...