Dashboards & Visualizations

unable to modify size of more than 2 rows in dashboar

marksheinbaum
Explorer

I have a dashboard using simple xml. The dashboard has 5 rows, each row of which contains 2 panels. The first panel is a small table and the second panel is a timechart. I would like the small table to be 20% of the width, and the timechart to be 80% of the width. I've tried to create a java script file so that the dashboard will run the java script automatically. The java script only works for the first 2 rows. Here's the js file. Any help appreciated.

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

// Grab the DOM for the panel 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%');

panelRow = $('.dashboard-row').next();
panelCells = $(panelRow).children('.dashboard-cell');
$(panelCells[0]).css('width', '20%');
$(panelCells[1]).css('width', '80%');

panelRow = $('.dashboard-row').next();
panelCells = $(panelRow).children('.dashboard-cell');
$(panelCells[2]).css('width', '20%');
$(panelCells[3]).css('width', '80%');


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

 

Labels (1)
0 Karma
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust

You can try doing it with a bit of CSS

    <panel depends="$stayhidden$">
      <html>
        <style>
          div[class="dashboard-cell dashboard-layout-panel"] {
            width: 20% !important;
          }
          div[class="dashboard-cell dashboard-layout-panel last-visible"] {
            width: 80% !important;
          }
        </style>
      </html>
    </panel>

 

View solution in original post

0 Karma

marksheinbaum
Explorer

Thanks for that bit of insight. I didn't know you could do that...

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

You can try doing it with a bit of CSS

    <panel depends="$stayhidden$">
      <html>
        <style>
          div[class="dashboard-cell dashboard-layout-panel"] {
            width: 20% !important;
          }
          div[class="dashboard-cell dashboard-layout-panel last-visible"] {
            width: 80% !important;
          }
        </style>
      </html>
    </panel>

 

0 Karma
Get Updates on the Splunk Community!

See just what you’ve been missing | Observability tracks at Splunk University

Looking to sharpen your observability skills so you can better understand how to collect and analyze data from ...

Weezer at .conf25? Say it ain’t so!

Hello Splunkers, The countdown to .conf25 is on-and we've just turned up the volume! We're thrilled to ...

How SC4S Makes Suricata Logs Ingestion Simple

Network security monitoring has become increasingly critical for organizations of all sizes. Splunk has ...