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
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Community Content Calendar, September edition

Welcome to another insightful post from our Community Content Calendar! We're thrilled to continue bringing ...

Splunkbase Unveils New App Listing Management Public Preview

Splunkbase Unveils New App Listing Management Public PreviewWe're thrilled to announce the public preview of ...

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Are you leveraging automation to its fullest potential in your threat detection strategy?Our upcoming Security ...