All Apps and Add-ons

Empty panels displaying when using tabs and switcher modules

Explorer

I know I am not the first one to have asked this question, but I have not found a solution that has worked. I am building a dashboard in SideView editor 3.1.1 using the tabs and switcher modules. I am attempting to have each tab display different types of charts and tables based on the tab chosen. The problem is some of the charts are not displaying properly due to some of the empty panels from the other tabs bleeding over.

I have tried to use the nullmodule and grouping without any success. I also tried creating a "tabswitcher.css" and placing it in the customBehavior option in both the tab and switcher module.

.dashboardCell {
padding: 0;
border-width: 0;
{

I am not sure if there is anything else to try or if anyone has any other suggestions.

Thanks in advanced for all of your help!

0 Karma
1 Solution

SplunkTrust
SplunkTrust

The problem really, is that the dashboard.html template was never designed to accommodate things on the page that might show and hide some of the panels. As a result,

1) the outer rounded-corner bits of the panels remain visible even when all their modules have hidden themselves.

2) the panel widths are set when the page loads, such that in a three column row, each one has width:33% in it in the template. Since the module system doesn't even know anything at the page template level, it can't see these fixed widths to adjust them later at runtime.

Sideview Utils does have a prototype module I added in 3.1 called ShowHide that you can use to explicitly show and hide any CSS selector(s) when that module receives pushes. You would often use this module in pairs, where a push at one spot hides N panels, and a push at another spot shows them. However this only solves problem #1 above, which makes it only useful for hiding/showing full-width panels. To hide/show and recalculate widths of panels in multi-panel rows, you would have to write a little customBehavior in JS.

I've thought a lot about adding some facility to make this all work with Splunk's dashboard.html template, but in the long run it is easier and better for Sideview Utils to just provide a new page template that can supercede the dashboard.html template and thus fix this problem (and many others) in better ways. So stay tuned for that.

View solution in original post

Explorer

I think I had a brain freeze (sorry!) It wasn't a custom behavior, I had changed the stylesheet.

0 Karma

Path Finder

Did you ever get this working? I understand sideview's explanation but was wondering if there was any workaround since 2014? Thanks.

0 Karma

SplunkTrust
SplunkTrust

You mentioned creating a "tabswitcher.css" and putting it in a customBehavior param, but that doesn't make any sense. customBehavior is for defining custom javascript, not custom CSS. You define your customBehavior in application.js and refer to it by the customBehavior name. It's very advanced and docs linked to from the "other tools" page can tell you more. On the other hand custom CSS is very different - you can use the stylesheet="foo.css" attribute on the <view> tag, or the customStylesheet param on SideviewUtils module, or just create application.css in YOUR_APP/appserver/static.

0 Karma

SplunkTrust
SplunkTrust

The problem really, is that the dashboard.html template was never designed to accommodate things on the page that might show and hide some of the panels. As a result,

1) the outer rounded-corner bits of the panels remain visible even when all their modules have hidden themselves.

2) the panel widths are set when the page loads, such that in a three column row, each one has width:33% in it in the template. Since the module system doesn't even know anything at the page template level, it can't see these fixed widths to adjust them later at runtime.

Sideview Utils does have a prototype module I added in 3.1 called ShowHide that you can use to explicitly show and hide any CSS selector(s) when that module receives pushes. You would often use this module in pairs, where a push at one spot hides N panels, and a push at another spot shows them. However this only solves problem #1 above, which makes it only useful for hiding/showing full-width panels. To hide/show and recalculate widths of panels in multi-panel rows, you would have to write a little customBehavior in JS.

I've thought a lot about adding some facility to make this all work with Splunk's dashboard.html template, but in the long run it is easier and better for Sideview Utils to just provide a new page template that can supercede the dashboard.html template and thus fix this problem (and many others) in better ways. So stay tuned for that.

View solution in original post

Path Finder

Hi Nick, did SideView ever get a module working hiding the downstream custom-width unpopulated panels?

0 Karma