Simple XML - Display 2 panels in a row with different widths

[davebrooking]

First my disclaimer. This is my first attempt at using css/js to manipulate dashboards and I have no grounding as a Web Developer whatsoever. The following is my uneducated interpretation of what I'm seeing.

I'm trying to create a Simple XML dashboard in Splunk 6.1 where the panels in a row use different proportions of the row. The first panel I want to use 60% of the row, and the second panel use the remaining 40% of the row.

I'm using a Chrome browser, and when I view the html using Inspect element there always seems to be a div statement that sets the width of the last visible dashboard cell to 50% - if there are 3 panels in the row, it sets the width of the last visible cell to 33.33%.

<div class="dashboard-cell last-visible" style="width: 50%;">

I've seen some application.css files, from a 4.3 app using Advanced XML, that used the following to set the panels in a row to separate widths

.splview-dashboard .panel_row2_col .layoutCell {
        width: 40% !important;
}
.splview-dashboard .panel_row2_col .firstCell {
        width: 60% !important;
}

In my 2 panel row, the dashboard-cell last-visible setting seems to force the last panel to be 50% of the row, irrespective of other width settings for that row. Is there something similar to the above that I can do in css or js to override the dashboard-cell last-visible setting?

I've managed to change a html version of the dashboard to allow the panels in a row to have different widths, this was covered by the example code at http://dev.splunk.com/view/SP-CAAAEVJ, but can this be done in Simple XML, or by using Simple XML Extensions.

Dave

[davebrooking]

For completeness, I thought I'd post the js I ended up using to help other novice web developers.

I needed to manipulate the panels in rows 2, 3 and 4 of my dashboard, so the script I've used is

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {

// Grab the DOM for the first dashboard row
var panelRow = $('.dashboard-row').first();

// Grab the DOM for the second dashboard row
panelRow = $(panelRow).next();

// Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
var panelCells = $(panelRow).children('.dashboard-cell');

// Adjust the cells' width
$(panelCells[0]).css('width', '60%');
$(panelCells[1]).css('width', '40%');

// Manipulate the third dashboard row   
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');   
$(panelCells[0]).css('width', '60%');
$(panelCells[1]).css('width', '40%');

// Manipulate the fourth dashboard row  
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');   
$(panelCells[0]).css('width', '60%');
$(panelCells[1]).css('width', '40%');

// Force visualizations (esp. charts) to be redrawn with their new size
$(window).trigger('resize');

});

I'm sure the code could be improved, but it works for me.

Thanks for the pointer to the "Layout Customization: Panel Width" in the Splunk 6.x Dashboard Examples.

Dave

[nfilippi_splunk · Accepted solution]

Check out the example "Layout Customization: Panel Width" that is packaged in the Splunk 6.x Dashboard Examples app (http://apps.splunk.com/app/1603/). This should give you what you need.

Couple things of note:

• You'll need to put your custom_layout_width.js in your app's appserver/static/ directory
• You may need to restart splunk after adding this file (only required when first creating; updates are fine)
• You'll need to include this js file within your dashboard/form attribute as highlighted in the example

[nfilippi_splunk]

Correct, that example is new in v2.0.1 (latest) of the app. Do note that to install the latest version, you will need to first remove the old version from the file system (delete all files).

[davebrooking]

I had an old version of the Splunk 6.x dashboard examples installed, it doesn't appear to have that particular dashboard. I'll download the new version, and let you know how I get on.

Thanks

Dave

[tom_frotscher]

Hi,

you can use custom stylesheets and javascript in simple xml:
link: docu

After that you have to find the css class that adds the 50% width to the panel and override this class in your custom css class.

[valentrm]

It works but the width that i want to change is not the panel but inside panel. I want to change the group inside the panel. How can i in a row change the width of the groups?