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!

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