Change layoutpanel width

[sf_user_199]

I have a dashboard with 3 graphs on it.

The main graph I have in panel_row1_col1 layout panel, and it covers the top half of the screen.

The other two graphs are sharing a row - panel_row2_col1 & panel_row2_col2. This means that they get 50% of the row each. I'd like for panel_row2_col1 to get about 25% of the screen width, and panel_row2_col2 to get about 75% of the screen's width. I've tried using _grpX, but I still end up with things being split 50/50.

Any suggestions?

[xisura]

hi i have a question. do you know how to change the width of the second panel in a row??

[bbingham · Accepted solution]

You can control the sizes through css. I normally create a unique dashboard_size.css file, and then adjust the panel groups in that css file.

Make sure to include the dashboard_size.css file in your xml.

xml include:
~/default/data/ui/views/dashboard.xml

<view autoCancelInterval="90" isVisible="true" onunloadCancelJobs="true" refresh="-1" template="dashboard.html" stylesheet="dashboard_size.css">

~/appserver/static/dashboard_size.css

.panel_row1_col .layoutCell {
        width:210px !important;
}
.panel_row1_col .firstCell {   
        width:500px !important;
}
.panel_row5_col .layoutCell {
        width:330px !important;
}

[bbingham]

In your case, you should use 1 panel, and then adjust the css for each "div" of the gauge to have a float: left;, so view source on your panel, and you'll see id's for your gauges, similar to:
id="SingleValue_0_14_2"

you'll then take all your guages ids, and float them:

.SingleValue_0_14_1 .SingleValue_0_14_2 .SingleValue_0_14_3 {
    float:left;
}

If you really want "10" panels (gray chrome between them), you'll have to make a new template, but I think you'll find 10 gauges in 1 panel will work for your use case.

[benwu63]

Thanks for the solution, bbingham! However, it did not work for me. Is there any more settings needed in the css file?

My goal is to put at least 10 panels (filler gauge for CPU Utilisation) on one row. I am using the following in the css file:

.panel_row1_col .layoutCell {
width:10% !important;
}
.panel_row1_col .firstCell {

width:10% !important;
}
.panel_row1_col .secondCell {

width:10% !important;
}
........
.panel_row1_col .ninthCell {

width:10% !important;
}

Is this the right way to accomplish this? Thanks!