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
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>
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;
}
Any working solution for 9.4.x
Doesn't seem to be working thus far any of the suggestions.
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>
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>
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>
We're seeing similar issues with 9.3.2408