All Apps and Add-ons

Empty panels displaying when using tabs and switcher modules

mbazelon
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

sideview
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

mbazelon
Explorer

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

0 Karma

ifeldshteyn
Communicator

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

0 Karma

sideview
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

sideview
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.

ifeldshteyn
Communicator

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

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...