Dashboards & Visualizations

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

JulienKVT
Engager

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

Labels (2)
1 Solution

Paul_Dixon
Explorer

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>

View solution in original post

bowesmana
SplunkTrust
SplunkTrust

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

 

yh
Path Finder

Any working solution for 9.4.x

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

0 Karma

Paul_Dixon
Explorer

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>

mhopa
Engager

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>

 

ITWhisperer
SplunkTrust
SplunkTrust

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

johnhuang
Motivator

We're seeing similar issues with 9.3.2408

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!

Calling All Security Pros: Ready to Race Through Boston?

Hey Splunkers, .conf25 is heading to Boston and we’re kicking things off with something bold, competitive, and ...

Beyond Detection: How Splunk and Cisco Integrated Security Platforms Transform ...

Financial services organizations face an impossible equation: maintain 99.9% uptime for mission-critical ...

Customer success is front and center at .conf25

Hi Splunkers, If you are not able to be at .conf25 in person, you can still learn about all the latest news ...