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!

Splunk AI Assistant for SPL | Key Use Cases to Unlock the Power of SPL

Splunk AI Assistant for SPL | Key Use Cases to Unlock the Power of SPL  The Splunk AI Assistant for SPL ...

Buttercup Games: Further Dashboarding Techniques (Part 5)

This series of blogs assumes you have already completed the Splunk Enterprise Search Tutorial as it uses the ...

Customers Increasingly Choose Splunk for Observability

For the second year in a row, Splunk was recognized as a Leader in the 2024 Gartner® Magic Quadrant™ for ...