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!

What's New in Splunk Cloud Platform 9.3.2411?

Hey Splunky People! We are excited to share the latest updates in Splunk Cloud Platform 9.3.2411. This release ...

Buttercup Games: Further Dashboarding Techniques (Part 6)

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

Technical Workshop Series: Splunk Data Management and SPL2 | Register here!

Hey, Splunk Community! Ready to take your data management skills to the next level? Join us for a 3-part ...