topic Re: How to Horizontally align the radio button in Splunk dashboard in Dashboards & Visualizations

How to Horizontally align the radio button in Splunk dashboard

basilarockiaedw — Wed, 22 Mar 2017 15:00:55 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

nick405060 — Fri, 22 Feb 2019 18:19:32 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

vnravikumar — Thu, 28 Feb 2019 14:45:19 GMT

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>

Re: How to Horizontally align the radio button in Splunk dashboard

efavreau — Thu, 28 Feb 2019 19:23:20 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

vnravikumar — Thu, 28 Feb 2019 22:28:07 GMT

The above sample will work in 7.2.4

Re: How to Horizontally align the radio button in Splunk dashboard

vnravikumar — Thu, 28 Feb 2019 22:32:29 GMT

I will let you know for v 6.6.6

Re: How to Horizontally align the radio button in Splunk dashboard

vnravikumar — Fri, 01 Mar 2019 10:25:30 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

efavreau — Fri, 01 Mar 2019 15:41:04 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

jlr — Fri, 09 Aug 2019 01:37:25 GMT

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.

Re: How to Horizontally align the radio button in Splunk dashboard

thisemailwillbe — Mon, 24 Feb 2020 18:22:03 GMT

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?

Re: How to Horizontally align the radio button in Splunk dashboard

jlr — Mon, 24 Feb 2020 21:00:18 GMT

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

Re: How to Horizontally align the radio button in Splunk dashboard

thisemailwillbe — Tue, 25 Feb 2020 18:53:41 GMT

Sweet - Thanks for your help. Cheers!