All Apps and Add-ons

How to put the label of the pulldown menus on top, not on the side in Sideview Utils?

etchouako
Explorer

How to put the label of the pulldown menues on top not on the side in sideview

0 Karma
1 Solution

sideview
SplunkTrust
SplunkTrust

There is no param that controls this behavior in the Pulldown module (nor in the other form element modules), however it's fairly easy to do from the custom CSS side of things.

To change all the Pulldowns to this behavior in your whole app, put this block into application.css:

.Pulldown label {
  display:block;
  margin-bottom:2px;
}

To change it just in some of the views in your app, you can

a) put that same block into a new CSS file (call it custom.css or anything you like), and reference it in the stylesheet="custom.css" attribute in your <view> tag.

b) put that same block into custom.css and reference it in the customStylesheet param of the SideviewUtils module. (this mechanisms you can actually attach any number of custom stylesheets)

c) put this block into application.css:

.splView-view1 .Pulldown label,
.splView-view2 .Pulldown label,
.splView-view3 .Pulldown label {
  display:block;
  margin-bottom:2px;
}

where "view1", "view2" and "view3" are the three views being affected. Note that in CSS the space characters between those view names and the ".Pulldown" bit, are crucial and if you accidentally remove them it changes the meaning entirely.

View solution in original post

0 Karma

sideview
SplunkTrust
SplunkTrust

There is no param that controls this behavior in the Pulldown module (nor in the other form element modules), however it's fairly easy to do from the custom CSS side of things.

To change all the Pulldowns to this behavior in your whole app, put this block into application.css:

.Pulldown label {
  display:block;
  margin-bottom:2px;
}

To change it just in some of the views in your app, you can

a) put that same block into a new CSS file (call it custom.css or anything you like), and reference it in the stylesheet="custom.css" attribute in your <view> tag.

b) put that same block into custom.css and reference it in the customStylesheet param of the SideviewUtils module. (this mechanisms you can actually attach any number of custom stylesheets)

c) put this block into application.css:

.splView-view1 .Pulldown label,
.splView-view2 .Pulldown label,
.splView-view3 .Pulldown label {
  display:block;
  margin-bottom:2px;
}

where "view1", "view2" and "view3" are the three views being affected. Note that in CSS the space characters between those view names and the ".Pulldown" bit, are crucial and if you accidentally remove them it changes the meaning entirely.

0 Karma
Get Updates on the Splunk Community!

Observability | How to Think About Instrumentation Overhead (White Paper)

Novice observability practitioners are often overly obsessed with performance. They might approach ...

Cloud Platform | Get Resiliency in the Cloud Event (Register Now!)

IDC Report: Enterprises Gain Higher Efficiency and Resiliency With Migration to Cloud  Today many enterprises ...

The Great Resilience Quest: 10th Leaderboard Update

The tenth leaderboard update (11.23-12.05) for The Great Resilience Quest is out &gt;&gt; As our brave ...