- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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');
});
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks for that bit of insight. I didn't know you could do that...
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
