Dashboards & Visualizations

dropdown, radio,multiselect,time picker and buttons to align in a single horizontal line

DataOrg
Builder

I have a mutiple inputs form in a dashboard but it gets extends to new line for someinputs.
i need to align all inputs on a single horizontal line.

0 Karma
1 Solution

niketn
Legend

@premranjithj can you please add a screenshot of what is the issue you are facing? Also what do you want to do when the inputs can't be accommodated in the same row? Do you want to reduce input width or do you want to have scrollbar to the right?

Here is a previous answer on similar lines. Not sure if this is same requirement for you as well: https://answers.splunk.com/answers/789054/how-to-fix-the-dashboard-layout-irrespective-of-th.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

vnravikumar
Champion

Hi

Try this css

 <row depends="$hide$">
    <panel>
      <html>
        <style>
          div[data-view="views/dashboard/form/GlobalFieldset"] {
           display:inline-block !important;
           white-space: nowrap !important;
          }
        </style>
      </html>
    </panel>
  </row>

As @niketnilay said please add the screenshot.

0 Karma

niketn
Legend

@premranjithj can you please add a screenshot of what is the issue you are facing? Also what do you want to do when the inputs can't be accommodated in the same row? Do you want to reduce input width or do you want to have scrollbar to the right?

Here is a previous answer on similar lines. Not sure if this is same requirement for you as well: https://answers.splunk.com/answers/789054/how-to-fix-the-dashboard-layout-irrespective-of-th.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

DataOrg
Builder

The link works for my requirement.

0 Karma

niketn
Legend

@premranjithj I have converted my comment to answer. Please accept if your issue is resolved.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

efavreau
Motivator

When we needed all our radios to go horizontal instead of vertical, we added an id to the radio input, then added some custom CSS into our simple XML dashboard that leveraged that id. This should give you a basis to build from.

Edit your dashboard and edit the simple xml to add an id to your radio input. Example:

<input type="radio" token="mytoken" id="myradio">

Here's the panel for the custom inline CSS to leverage that label:

  <row depends="$alwaysHideCSS$">
    <panel>
      <html>
         <style>
            #myradio {
                width: 100%;
            }
            #myradio label {
                white-space: nowrap;
            }
            #myradio.splunk-radiogroup div[role=radiogroup] {
                flex-direction: row;
                flex-wrap: wrap;
            }
            #myradio.splunk-radiogroup div[role=radiogroup] div {
                margin-right: 20px;
            }
         </style>
       </html>
    </panel>
  </row>
###

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

DataOrg
Builder

@efavreau this will not server my purpose.
i want all inputs forms like mutitselect,radio,dropdown to align in same row instead of 2 rows horizontal due to space constraints

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...