Re: How to Horizontally align the radio button in ...

basilarockiaedw · ‎03-22-2017

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 · ‎08-08-2019

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 · ‎02-28-2019

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 · ‎02-24-2020

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?

jlr · ‎02-24-2020

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

thisemailwillbe · ‎02-25-2020

Sweet - Thanks for your help. Cheers!

efavreau · ‎02-28-2019

@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.

vnravikumar · ‎02-28-2019

Hi

The above sample will work in 7.2.4

vnravikumar · ‎02-28-2019

I will let you know for v 6.6.6

vnravikumar · ‎03-01-2019

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

efavreau · ‎03-01-2019

@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.

nick405060 · ‎02-22-2019

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

How to Horizontally align the radio button in Splunk dashboard

Cloud Platform | Customer Change Announcement: Email Notification Will Be Available ...

Mastering Synthetic Browser Testing: Pro Tips to Keep Your Web App Running Smoothly

Splunk Edge Processor | Popular Use Cases to Get Started with Edge Processor