Dashboards & Visualizations
Highlighted

Setting the width of a dropdown in a dashboard

Contributor

All,

I have a dashboard for which I created two dropdowns in XML. Both dropdowns are populated using a populatingSearch.

I've noticed that both dropdowns show up on the dashboard with a width of 214px. The HTML is:

<div class="select2-container" style="width: 214px;">...</div>

This width is incredibly small for my search results. As such, I want to change the width of this select box to 500px. I've tried altering the application.css file, but unsurprisingly the element's style will always take precedence.

Does anyone know an easy way to style dropdowns populated by searches? Thanks!

Tags (3)
0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Motivator

Have you tried going to: yoursplunkurl:8000/info (Development services) and clicking EAI object refresh? If not, try that. Then go back to the Development services URL and click Static resource cache control.

If that doesn't work, let me know.

Highlighted

Re: Setting the width of a dropdown in a dashboard

Contributor

It still defaults to 214px, not the width I set in the application.css file. Should I bump the version on the Static resource cache control?

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Motivator

I would, it will not hurt anything and will only cause your browser to clear any cached configurations.

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Motivator

Did that work?

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

SplunkTrust
SplunkTrust

If you are using advanced xml and Sideview Util, you can set width of Pulldown module using following

<module name="Pulldown">
   <param name="name">varPulldown</param>
.....
<param name="width">500px</param>
Highlighted

Re: Setting the width of a dropdown in a dashboard

Contributor

Is there no way to do this without using Sideview Util? I feel like this shouldn't be a hard-to-find/implement feature.

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Explorer

Couldn't agree more. dm

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Explorer

Would be nice to be able to control the width of each individual select list. One select list may have entries such as 'P1', 'P2', 'P3' so it could be 60px wide. The next one may need to be 250px wide. And I would like to control the margin/padding between them, and be able to have specific option style colors. Any way? In straight css this is 45 seconds of work. This is part of making a web page look like a web page. Long after the 'joy'(?) of a drag-and-drop moment is gone, the UI needs to stand on its own in front of users with real experience and expectations.

0 Karma
Highlighted

Re: Setting the width of a dropdown in a dashboard

Communicator

The only solution is to convert the dashboard to html and just change the width style inside the div element.
If you want 500px just put inside the div

...

Hope i could help 🙂

View solution in original post

0 Karma