topic Re: Change layoutpanel width in Dashboards & Visualizations

Change layoutpanel width

sf_user_199 — Mon, 28 Sep 2020 09:53:33 GMT

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?

Re: Change layoutpanel width

bbingham — Tue, 20 Sep 2011 22:41:19 GMT

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;
}

Re: Change layoutpanel width

xisura — Mon, 26 Sep 2011 03:13:08 GMT

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

Re: Change layoutpanel width

benwu63 — Mon, 28 Sep 2020 12:08:24 GMT

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!

Re: Change layoutpanel width

bbingham — Mon, 28 Sep 2020 12:08:27 GMT

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.