How to control the width of a panel

[responsys_cm]

I'm trying to figure out how to modify the width of a panel and I'm not quite sure where to start. I've looked at some of my dashboards in Firebug and I can see what a particular panel is named, so modifying it using CSS should be pretty straightforward. What I don't get though is how to make it such that the modification is only applied on one particular dashboard rather than all panels with that particular name.

I'm not a web developer and have only a rudimentary knowledge of CSS...

Thx.

Craig

[sideview · Accepted solution]

If you have a view called "my_view", there is a classname put on a container in the page that always looks like "splView-my_view". This means you can then use contextual CSS to apply styles only in that page.

However, the dashboard template unfortunately doesn't label the panel divs themselves in a particularly useful way, so your hand can be a little limited.

here's an example where you can change things without much trouble:

Say you had some modules in panel_row1_col1 and panel_row1_col2. By default those panels will then each get 50% width. If you wanted them to be 66% and 33% width respectively, you would add the following:

.splView-my_view .panel_row1_col .layoutCell {
    width:33%
}
.splView-my_view .panel_row1_col .firstCell {
    width:66%;
}

What the first rule is saying is - "in the my_view view, within the first row, make all of the layoutCells be 33% width"

then the second rule is saying "in the my_view view, within the first row, find the first cell in particular and make that one 66% width"

However, because our only toehold here is "firstCell" and "layoutCell", if you are trying to set the width of more complicated scenarios, then you'll have to put jquery statements into application.js rather than putting CSS into application.css, and that's a bit more advanced.

[responsys_cm]

Thanks, Nick!