Dashboards & Visualizations

How to left align panels in a row without stretch to width of screen using CSS

kumaranv
Engager

kumaranv_0-1640571903363.png

 

Labels (1)
0 Karma

tscroggins
Motivator

@kumaranv 

There are many ways to accomplish this, but in the context of Simple XML, we can embed CSS to hide padding panels that reduce the width of other panels:

 

<dashboard>
  <label>Panel Width</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count="WAN"</query>
        </search>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="hiddenpanel1"/>
    <panel id="hiddenpanel2"/>
    <panel id="hiddenpanel3"/>
    <panel id="hiddenpanel4"/>
  </row>
  <row>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count="LAN"</query>
        </search>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel>
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="hiddenpanel5"/>
    <panel id="hiddenpanel6"/>
    <panel id="hiddenpanel7"/>
    <panel id="hiddenpanel8"/>
  </row>
  <row id="hiddenrow">
    <html>
      <style>
        [id*="hidden"] {
          visibility: hidden;
        }
      </style>
    </html>      
  </row>
</dashboard>

 

panel_width.pngWe can also adjust the panel widths directly:

 

<dashboard>
  <label>Panel Width</label>
  <row>
    <panel id="resizepanel1">
      <single>
        <search>
          <query>| stats count 
| eval count="WAN"</query>
        </search>
      </single>
    </panel>
    <panel id="resizepanel2">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel3">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel4">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
  </row>
  <row>
    <panel id="resizepanel5">
      <single>
        <search>
          <query>| stats count 
| eval count="LAN"</query>
        </search>
      </single>
    </panel>
    <panel id="resizepanel6">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel7">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
    <panel id="resizepanel8">
      <single>
        <search>
          <query>| stats count 
| eval count=100</query>
        </search>
        <option name="unit">%</option>
      </single>
    </panel>
  </row>
  <row id="hiddenrow">
    <html>
      <style>
        #hiddenrow {
          visibility: hidden;
        }
        [id*="resizepanel"] {
          width: 10% !important;
        }
      </style>
    </html>      
  </row>
</dashboard>

 

But the results aren't always perfect:

panel_width_10pct.pngpanel_width_10pct_oops.png

0 Karma
Get Updates on the Splunk Community!

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...

What's New in Splunk Cloud Platform 9.0.2208?!

Howdy!  We are happy to share the newest updates in Splunk Cloud Platform 9.0.2208! Analysts can benefit ...

Admin Console: A Single, Unified Interface for All Your Cloud Admin Needs

WATCH NOWJoin us to learn how the admin console can save you time and give you more control over the Splunk® ...