CSS changes in v9.4.0

[coreyCLI]

I have some html/css like below that sets the width of some single value panels.  In v8.3.1 this worked fine but now in v9.4.0 it does not work and sizes the panels evenly across the row.  IE - two single value panels, each get 50%.  I have tried using the Developer Tools in Chrome but all the elements I try have no affect.

#panel1 {
   width: 20% !important
}
#panel2 {
   width: 20% !important
}

Any thoughts?

[ITWhisperer]

See my answer to a similar question

https://community.splunk.com/t5/Dashboards-Visualizations/Dashboard-CSS-Width-setup-doesn-t-work-any...

[coreyCLI]

interesting approach and thanks for providing it!  I came up with multiple solutions for the deferent scenarios we have.  We have some 9.4.0 right now we are testing and some 9.3.1 which will be upgraded to 9.3.2 soon.

• If there was a single value panel in a row by itself I just updated the CSS to change the width of the entire row vs just the width of the panel by giving the row an id instead of giving the single value panel and id. 

#panelid { width: 30% !important;} --this works in 9.3.1 but not in 9.4.1

#rowWithPanel { width: 30% !important;} --this works in 9.4.1 and 9.3.1

• If there were two single value panels in a row that we needed to adjust the width of I used the below.  I wrote it two ways so that it would work in all our environments that currently have v9.3.1 and 9.4.0.

#panelid1 { 
width: 15% !important; --this works in 9.3.1 but not 9.4.1
flex-basis: 15% !important; --this works in 9.4.1 but not in 9.3.1
} 
#panelid2 { 
width: 25% !important; --this works in 9.3.1 but not 9.4.1
flex-basis: 25% !important; --this works in 9.4.1 but not in 9.3.1
} 

[johnhuang]

@coreyCLI, thank you for this. Adding "flex-basis" resolved the issue for me.

[johnhuang]

We're seeing similar issues with 9.3.2408