Dashboards & Visualizations

How to fix the dashboard layout irrespective of the screen resolution ? Especially the dashboard input section layout

sanjeev543
Communicator

How to fix the dashboard layout irrespective of the screen resolution ? Especially the dashboard input section layout.

The current layout that I have, the inputs sections keeps changing when it goes to higher resolution screens ?

Can I make the layout to be fixed ? @woodcock @niketnilay @martin_mueller

niketn
Legend

@sanjeev543 before answering the question I would want to know the reason for turning responsive UI width into fixed?

Whatever be your justification, if the panel id with inputs where you need to fix the panel width is panel_fixed_inputs you can try the following CSS for turning panel width from 100% (responsive to static) i.e.

          #panel_fixed_inputs{
            width: 1480px !important;
          }

alt text

Following is the complete run anywhere dashboard example

<form>
  <label>Dashboard with fixed inputs</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCssStyle$">
    <panel>
      <html>
        <style>
          #panel_fixed_inputs{
            width: 1495px !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel id="panel_fixed_inputs">
      <title>Panel with Fixed Width through CSS Override</title>
      <input type="dropdown" token="field1">
        <label>field1</label>
      </input>
      <input type="dropdown" token="field4">
        <label>field4</label>
      </input>
      <input type="multiselect" token="field3">
        <label>field3</label>
      </input>
      <input type="multiselect" token="field5">
        <label>field5</label>
      </input>
      <input type="text" token="field2">
        <label>field2</label>
      </input>
      <input type="text" token="field6">
        <label>field6</label>
      </input>
    </panel>
  </row>
  <row>
    <panel id="panel_responsive_inputs">
      <title>Panel with responsive width</title>
      <input type="dropdown" token="field01">
        <label>field01</label>
      </input>
      <input type="dropdown" token="field04">
        <label>field04</label>
      </input>
      <input type="multiselect" token="field03">
        <label>field03</label>
      </input>
      <input type="multiselect" token="field05">
        <label>field05</label>
      </input>
      <input type="text" token="field02">
        <label>field02</label>
      </input>
      <input type="text" token="field06">
        <label>field06</label>
      </input>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

vikashperiwal
Path Finder

how to do the same in the fieldset ?

0 Karma

woodcock
Esteemed Legend

I am pretty sure that this cannot be done, but if it can, @niketnilay is the guy to do it.

niketn
Legend

Hopefully done!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
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 ...