How to resize the height of single value dashboard panels to fit more rows on my screen or is there another option to avoid scrolling down?

[ILOT]

I have a Dashboard with quite a few Single Values to display.

15+ rows and 5 Columns.

I want to use as much of the real estate on my screen as possible..

1. is it possible to resize the height of the panel/cell/single value visualization so I can fit more rows on my screen (before needing to scroll down). Resizing the panel itself or the whole row is fine.
2. if not, is it possible to be able to place all that information in a table instead? I am a little stuck on how to do this...

Thank you for your help.

[ILOT]

Currently, the best I can come up with is manually resizing the required panels via java script.

Anchoring every panel with an ID_(Column|Row|Data)_#

Column = top column panel
Row = Row header panel
Data = Actual Search Results.

JScript below resizes all except the column panel (and I will be able to customize Row/Data respectively if needed)
Basically I am building the single panels and compiling them together like a table.

As shown below, it is a little unwieldy and messy. I am hoping for something better from the community.

Disclaimer, not sure if you can use the code below as it. As I was experimenting a lot, and I stripped down a lot of the code (because it was not relevant)..

require(['jquery', 
        'splunkjs/mvc/simplexml/ready!'], 

function($) {

    $("[id*=ID]").each(function() {
    var match = /ID_?(Column|Row|Data)?_?(\d+)?/.exec($(this).attr('id'));
    console.log(match);

    if (match[1] == 'Column'){}
        if (match[1] == 'Row'){}
    else {
        $(this).find(".dashboard-panel").css('height', '68px');
        $(this).find(".dashboard-element").css('height', '68px');
        $(this).find(".panel-body").css('height', '24px');
        }

    });
    $(window).trigger('resize');
 });

[fdi01]

try this example below .js file. can help you to understannd:
code 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>
    </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>

    </dashboard>

"custom_layout_width.js" file or code 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');
    });

after you have something like this:

[ILOT]

fdi01 thank you for your information. however, the width is not an issue. I am hoping to resize the height.

thank you ..

[chimell · Accepted solution]

Hi ILOT
Go to your dashbord xml code add the following option in the following order
For example in each panel and each single add :

 <option name="height">enter a number px</option> 

For example :

 <row>
            <panel>
                    <single>
                       <option name="height">300px</option>
                    </single>
            <option name="height">600px</option>
            </panel>
        </row>

[sjscott]

This worked for me. Thanks!

[chimell]

good thanks

[ILOT]

Don't think the Panel object have a options mapper named height.. I get this error

*XML Syntax Error: Cannot find object mapper for panel type: option View more information about your request (request ID = 5519008ce19f0a940) in Search
*

  <single>
    <title>Application Components</title>
    <search>
      <query>...</query>
      <earliest>-60m@m</earliest>
      <latest>now</latest>
    </search>
    <option name="classField">range</option>
    <option name="drilldown">all</option>
    <option name="linkView">search</option>
  </single>
  <option name="height">600px</option>
</panel>

Adding it inside the Single Value tag also does not work..

At the moment I am doing this via Java script/CSS and it is messy as I have to resize a few visualization elements manually. I am hoping a much more elegant solution.

I also do not have any splunk addons... (will addons help? sideview utils?)