Solved: unable to modify size of more than 2 rows in dashb...

marksheinbaum · ‎12-02-2021

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');
});

ITWhisperer · ‎12-02-2021

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

marksheinbaum · ‎12-02-2021

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

ITWhisperer · ‎12-02-2021

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>

unable to modify size of more than 2 rows in dashboar

javascript

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes

Welcome to the Splunk Community!