topic Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ? in Dashboards & Visualizations

Dashboard CSS Width setup doesn't work anymore with 9.x version ?

JulienKVT — Mon, 24 Feb 2025 14:27:48 GMT

Hello,

I used to use CSS Style custom values to set specific width :

<row id="MasterRow">
<panel depends="$alwaysHideCSS$">
<title>Single value</title>
<html>
<style>
#Panel1{width:15% !important;}
#Panel2{width:85% !important;}
</style>
</html>
</panel>
<panel id="Panel1">....</panel>
<panel id="Panel2">....</panel>
</row>

Still since last week update (9.xx) this code doesn't work anymore and my panels came back to normal (50/50 or 33/33/33) etc...

Any thought about the new code it requires to fix the width/height please?

I can't afford to switch all my dashboard into Dashboard studio format for the coming weeks...

Thank you by advance

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

johnhuang — Tue, 25 Feb 2025 20:58:46 GMT

We're seeing similar issues with 9.3.2408

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

ITWhisperer — Thu, 27 Feb 2025 16:50:11 GMT

Try something like this (depending on where your hidden/style panel is in the row)

<row id="MasterRow"> <panel depends="$alwaysHideCSS$"> <title>Single value</title> <html> <style> #MasterRow div:nth-child(2).dashboard-cell {width:15% !important;} #MasterRow div:nth-child(3).dashboard-cell {width:85% !important;} </style> </html> </panel> <panel id="Panel1">....</panel> <panel id="Panel2">....</panel> </row>

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

mhopa — Tue, 11 Mar 2025 10:26:30 GMT

Looks like there has been a change in styling (CSS) with the Splunk update. This should do the trick (note the styling for MasterRow):

<row id="MasterRow"> <panel depends="$alwaysHideCSS$"> <title>Single value</title> <html> <style> #MasterRow{display: block;} #Panel1{width:15% !important;} #Panel2{width:85% !important;} </style> </html> </panel> <panel id="Panel1">....</panel> <panel id="Panel2">....</panel> </row>

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

Paul_Dixon — Mon, 07 Apr 2025 11:57:55 GMT

I have found that just replacing width with max-width in the CSS Style works also, i.e.

<row id="MasterRow">
<panel depends="$alwaysHideCSS$">
<title>Single value</title>
<html>
<style>
#Panel1{max-width:15% !important;}
#Panel2{max-width:85% !important;}
</style>
</html>
</panel>
<panel id="Panel1">....</panel>
<panel id="Panel2">....</panel>
</row>

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

yh — Fri, 16 May 2025 08:11:20 GMT

Any working solution for 9.4.x

Doesn't seem to be working thus far any of the suggestions.

Re: Dashboard CSS Width setup doesn't work anymore with 9.x version ?

bowesmana — Fri, 16 May 2025 08:17:42 GMT

The new CSS uses a flex attribute, which breaks the old definitions.

I had used the syntax below (without the flex:unset) , but since the breaking change, the flex:unset fixes the problem.

#header_row .dashboard-cell { flex:unset; } #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; }