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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...