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!

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...