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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...