Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to change the width of panels in xml on Splunk version 9.4.1?

yh
Path Finder
‎05-16-2025 12:56 AM

Hi,

I would like to resize the panels that I have in a Splunk row. So I have 3 panels and I referred to some previous posts on doing the panel width resize using CSS. I remember this used to work? But I can't seem to get this working on my current Splunk dashboard. Due to some script dependencies, I am not able to use Dashboard Studio hence still stuck with the classic XML dashboard.

I referred to previous question on this and did exactly like what was mentioned but the panels still appear equally spaced at 33.33% each.

Spoiler
<form version="1">
<label>Adjust Width of Panels in Dashboard</label>
<fieldset submitButton="false">
<input type="time" token="tokTime" searchWhenChanged="true">
<label>Select Time</label>
<default>
<earliest>-24h@h</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel depends="$alwaysHideCSS$" id="CSSPanel">
<html>
<p/>
<style>
#CSSPanel{
width:0% !important;
}
#errorSinglePanel{
width:25% !important;
}
#errorStatsPanel{
width:30% !important;
}
#errorLineChartPanel{
width:45% !important;
}
</style>
</html>
</panel>
<panel id="errorSinglePanel">
<title>Splunkd Errors (Single Value)</title>
<single>
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="colorBy">trend</option>
<option name="colorMode">block</option>
<option name="drilldown">none</option>
<option name="numberPrecision">0</option>
<option name="showSparkline">1</option>
<option name="showTrendIndicator">1</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
<option name="trendColorInterpretation">inverse</option>
<option name="trendDisplayMode">absolute</option>
<option name="unitPosition">after</option>
<option name="useColors">1</option>
<option name="useThousandSeparators">1</option>
</single>
</panel>
<panel id="errorStatsPanel">
<title>Top 5 Error (Stats)</title>
<table>
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO
| top 5 component showperc=false</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="drilldown">none</option>
<option name="refresh.display">progressbar</option>
</table>
</panel>
<panel id="errorLineChartPanel">
<title>Splunkd Errors (Timechart)</title>
<chart>
<search>
<query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count</query>
<earliest>$tokTime.earliest$</earliest>
<latest>$tokTime.latest$</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.chart">line</option>
<option name="charting.drilldown">none</option>
<option name="trellis.enabled">0</option>
<option name="trellis.scales.shared">1</option>
<option name="trellis.size">medium</option>
</chart>
</panel>
</row>
</form>




Labels (3)
Labels
Tags (2)
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

bowesmana
SplunkTrust
SplunkTrust
‎05-16-2025 01:13 AM

I'm assuming you have the following sort of CSS

          #header_row .dashboard-cell:nth-child(1) {
            width:52% !important;
          }
          #header_row .dashboard-cell:nth-child(2) {
            width:24% !important;
          }
          #header_row .dashboard-cell:nth-child(3) {
            width:24% !important;
          }

which has stopped working with Splunk 9.4.

You need to add the following for each of your row definitions 

          #header_row .dashboard-cell {
            flex:unset;
          }

It's the flex attribute that is present in 9.4 variants that breaks things, so this fixes it.

View solution in original post

Reply
Solved! Jump to solution
Solution

bowesmana
SplunkTrust
SplunkTrust
‎05-16-2025 01:13 AM

I'm assuming you have the following sort of CSS

          #header_row .dashboard-cell:nth-child(1) {
            width:52% !important;
          }
          #header_row .dashboard-cell:nth-child(2) {
            width:24% !important;
          }
          #header_row .dashboard-cell:nth-child(3) {
            width:24% !important;
          }

which has stopped working with Splunk 9.4.

You need to add the following for each of your row definitions 

          #header_row .dashboard-cell {
            flex:unset;
          }

It's the flex attribute that is present in 9.4 variants that breaks things, so this fixes it.

Reply
Solved! Jump to solution

yh
Path Finder
‎05-16-2025 01:24 AM

Thank you so much! How did you all figure it out? Life saver!

0 Karma
Reply
Get Updates on the Splunk Community!

Index This | What did the zero say to the eight?

June 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...

Splunk Observability Cloud's AI Assistant in Action Series: Onboarding New Hires & ...

This is the fifth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how to ...

Now Playing: Splunk Education Summer Learning Premieres

It’s premiere season, and Splunk Education is rolling out new releases you won’t want to miss. Whether you’re ...
Top