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!

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...

Spotting Financial Fraud in the Haystack: A Guide to Behavioral Analytics with Splunk

In today's digital financial ecosystem, security teams face an unprecedented challenge. The sheer volume of ...

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability

Solve Problems Faster with New, Smarter AI and Integrations in Splunk Observability As businesses scale ...