Dashboards & Visualizations

Is it possible to specify the width of a panel in the XML layout?

zliu
Splunk Employee
Splunk Employee

Is it possible to specify the width of a panel in the XML layout?

Tags (1)
1 Solution

sideview
SplunkTrust
SplunkTrust

Yes although not directly and this method might be a little too hands-on for many.

Here's how. I'll show you how to do it with a clone of the 'search status' view that we ship in the search app. In the third row of that view there are two panels, and we'll set the width of the first to 67% and the width of the second to 33%.

NOTE: in 4.1 the two-panel row is actually the second row, not the third row so this walkthrough is a little different. If in doubt check the actual view you have.

step 1: from the search app go to Manager and go to the Views page. Under 'search_status' click the 'clone link'. Call the view 'custom_width_test' or whatever you like.

step 2: in that cloned view, add a stylesheet="custom_width.css" attribute to the root node of your view. Because this is a simplified dashboard, you'll add this attribute to the tag. (if you're in a simplified form search you'd add it to the tag at the top, and likewise if you're in the advanced XML you'll just add it to the tag.)

step 3: in etc/apps/search/appserver/static/ create a file called custom_width.css whose contents look like this:

.panel_row3_col .layoutCell {
  width:33% !important;
}
.panel_row3_col .firstCell {
  width:67% !important;
}

That's all she wrote. It would be a little trickier to modify the widths of a row that had 3 or more panels, but hopefully this example is what you need.

n

View solution in original post

ashtam
New Member

This is great, but how do I affect the second panel in a row with three or more panels? You say it's trickier but not impossible.

0 Karma

sideview
SplunkTrust
SplunkTrust

Yes although not directly and this method might be a little too hands-on for many.

Here's how. I'll show you how to do it with a clone of the 'search status' view that we ship in the search app. In the third row of that view there are two panels, and we'll set the width of the first to 67% and the width of the second to 33%.

NOTE: in 4.1 the two-panel row is actually the second row, not the third row so this walkthrough is a little different. If in doubt check the actual view you have.

step 1: from the search app go to Manager and go to the Views page. Under 'search_status' click the 'clone link'. Call the view 'custom_width_test' or whatever you like.

step 2: in that cloned view, add a stylesheet="custom_width.css" attribute to the root node of your view. Because this is a simplified dashboard, you'll add this attribute to the tag. (if you're in a simplified form search you'd add it to the tag at the top, and likewise if you're in the advanced XML you'll just add it to the tag.)

step 3: in etc/apps/search/appserver/static/ create a file called custom_width.css whose contents look like this:

.panel_row3_col .layoutCell {
  width:33% !important;
}
.panel_row3_col .firstCell {
  width:67% !important;
}

That's all she wrote. It would be a little trickier to modify the widths of a row that had 3 or more panels, but hopefully this example is what you need.

n

Lowell
Super Champion

@nick: Nevermind, I didn't have the !important in there properly. It works on IE now. Doh!

Lowell
Super Champion

Nick, I'm having issues doing this with IE (tried 7 and 8). There seems to be a style="width: 50%" attribute added to the div tag (possibly via javascript?) that is overriding my CSS. Any thoughts?

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...