Archive
Highlighted

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

Highlighted

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

Motivator

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

Highlighted

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

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

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

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
Highlighted

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

Champion

Hi

The above sample will work in 7.2.4

0 Karma
Highlighted

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

Champion

I will let you know for v 6.6.6

0 Karma
Highlighted

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

Champion

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

Highlighted

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

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
Highlighted

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

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
Highlighted

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

New Member

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

0 Karma