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!

Index This | When is October more than just the tenth month?

October 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Observe and Secure All Apps with Splunk

  Join Us for Our Next Tech Talk: Observe and Secure All Apps with SplunkAs organizations continue to innovate ...

What’s New & Next in Splunk SOAR

 Security teams today are dealing with more alerts, more tools, and more pressure than ever.  Join us for an ...