Is there an easy way to set the widths of different panel groups so they're NOT equal?

[valentrm]

Is there an easy way to set the widths of different groups so they're NOT equal? For example, I have a panel with 2 groups, and I want the first to be 70%, and the second to be 30% of the total panel width.

[masonmorales]

Yes, you can use javascript to accomplish this. Here's an example

custom_layout_panel_width.xml

<dashboard script="custom_layout_width.js">
  <label>Layout Customization: Panel Width</label>
  <row>
      <single>
        <searchString>index=_internal sourcetype=splunkd | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">splunkd events</option>
        <option name="linkView">search</option>
        <option name="drilldown">none</option>
      </single>
      <single>
        <searchString>index=_internal sourcetype=*access | stats count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="underLabel">access events</option>
      </single>
      <chart>
        <searchString>index=_internal | timechart count</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </chart>
  </row>
  <row>
      <table>
        <searchString>index=_internal | stats count by sourcetype</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
      </table>
  </row>

custom_layout_width.js

require(['jquery', 'splunkjs/mvc/simplexml/ready!'], function($) {
    // Grab the DOM for the first dashboard row
    var firstRow = $('.dashboard-row').first();
    // Get the dashboard cells (which are the parent elements of the actual panels and define the panel size)
    var panelCells = $(firstRow).children('.dashboard-cell');
    // Adjust the cells' width
    $(panelCells[0]).css('width', '20%');
    $(panelCells[1]).css('width', '20%');
    $(panelCells[2]).css('width', '60%');
    // Force visualizations (esp. charts) to be redrawn with their new size
    $(window).trigger('resize');
});

[valentrm]

Thank you very munch for the answer, i'll try to make it. Actually i didn't mention that i'm using sideview.
The answers still the same right?

Best regards

[jpmorris_splunk]

Hi,

I realise this is an old thread but I have the above example working and now I am trying to appy the same column widths to the 2nd row.

I have the java script as detailed below but the panels in the 2nd row do not show any data saying 'search is waiting for input' Can anyone see what I am doing wrong?

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

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

// 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', '20%');
$(panelCells[1]).css('width', '80%');

// Manipulate the second dashboard row
panelRow = $(panelRow).next();
panelCells = $(panelRow).children('.dashboard-cell');

// Adjust the cells' width in second row
$(panelCells[0]).css('width', '20%');
$(panelCells[1]).css('width', '80%');

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

});

[nicolas_perreau]

Hi valentrm,

I think you'll get the answer you want in this post :
http://answers.splunk.com/answers/149563/simple-xml-display-2-panels-in-a-row-with-different-widths....

Otherwise, maybe converting your xml dashboard to html will permit you to adjust the layout.

Hope this helps!

[valentrm]

Thank you very munch for the answer, i'll try to make it. Actually i didn't mention that i'm using sideview.
The answers still the same right?

Best regards