Are you a member of the Splunk Community?
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: Dashboard CSS Width setup doesn't work anymore...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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;
}
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Any working solution for 9.4.x
Doesn't seem to be working thus far any of the suggestions.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
We're seeing similar issues with 9.3.2408
Observability Unlocked: Kubernetes Monitoring with Splunk Observability Cloud
Update Your SOAR Apps for Python 3.13: What Community Developers Need to Know
October Community Champions: A Shoutout to Our Contributors!
