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

[zliu]

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

[ashtam]

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.

[sideview · Accepted solution]

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]

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

[Lowell]

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?