Solved: How to change the width of panels in xml on Splunk...

yh · ‎05-16-2025

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>

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

bowesmana · ‎05-16-2025

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

jamest216

So i was able to implement this flex change. Life saver because this isnt documented anywhere... wondering if you could provide additional help? So I have a panel with 10 singles in them. Before we had changed to 9.4.5 it would break at 5 and then the next 5 singles would go to a second row within the same panel. This response doesnt occur anymore and was wondering if I could get some help.

/* Row Styles */
[id$="_Apps_Row"] {
padding-bottom: 1% !important;
padding-top: 1% !important;
border: 2px solid $fi_background_color$;
border-radius: 10px;
background-color: $fi_background_color$;
box-shadow: 0 0px 4px rgba(126, 151, 173, 0.5), 0 -2px 4px rgba(255, 255, 255, 0.3);
}

[id$="_Apps_Header"] {
padding-top: 4% !important;
}

[id$="_Apps_Row"].dashboard-row .dashboard-panel,
[id$="_Apps_Row"] .panel-title {
background-color: $fi_background_color$ !important;
}

/* Panel Styles */
[id$="_service_panel"] {
background-color: $fi_background_color$ !important;
width: 20% !important;
flex: unset !important;
}

This is what I'm doing in my hidden style row.

bowesmana · ‎05-16-2025

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.

dural_yyz · ‎07-02-2025

This is awesome and just solved my custom panel width issue after banging my head for the last hour. Do you know where this attribute is documented for either behavior or which CSS items are support per version of Splunk.

bowesmana · ‎07-02-2025

I very much doubt there is any kind of documentation - I know this issue has been discussed here and on Splunk Slack channels and there is more than one way to achieve this.

This site is a good resource for this type of question.

yh · ‎05-16-2025

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

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

Classic dashboard

CSS

panel

Splunk Observability for AI

Splunk Enterprise Security 8.x: The Essential Upgrade for Threat Detection, ...

Splunk Observability as Code: From Zero to Dashboard

Are you a member of the Splunk Community?