Single Value Width with Multiple Single Value Stacked

[hoangtony]

Hi All,

I've hunted around for answers but haven't been able to figure it out.  What I am trying to do is have multiple Single Values stacked vertically and adjust the width of them.

I've tried two methods, the first using JS like so:

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', '10%');
    $(panelCells[1]).css('width', '20%');
    $(panelCells[2]).css('width', '45%');
    $(panelCells[3]).css('width', '25%');
});

And another using CSS like below:

<style>
  #second_row_stats,
  #second_row_perc {
    width: 15% !important;
  }
</style>

So either method works if there is only one Single Value in the panel.  Basically the Single Value width adjusts to what the panel width adjusts to.  However if you have a more than one Single Value in the same panel, the panel width is adjusted but the Single Value doesn't expand to the length of the panel width.

What I get is this:

The first row is using the JS and with Single Values it will adjust properly.  Second row is using the CSS but with multiple Single Values you can see there are gaps.

Switching between JS or CSS makes no difference.  I've tried using display: grid too but that didn't help, just ensured it was stacked vertically.

Any help would be great.  Thanks!

[richgalloway]

Check out the new dashboard framework at https://splunkbase.splunk.com/app/4710/. It should let you create a layout like that.

[hoangtony]

Thanks for the pointer.  I did look at this app previously but it's not using SimpleXML and the dashboard I'm working on is a production dashboard that I'm making changes to.  Unfortunately I wouldn't be able to use the JSON format this app is using for the moment.