topic Re: Splunk 6 dropdown menu - decrease width in Dashboards & Visualizations

Splunk 6 dropdown menu - decrease width

carmackd — Fri, 06 Dec 2013 14:55:58 GMT

I'm trying to decrease the width of my drop down menus on a form I'm creating. According to the web framework documentation, I can adjust this using the width property for the DropdownInput object after converting my dashboard to HTML.

http://docs.splunk.com/Documentation/WebFramework

However, after doing so it seems I can only increase the width, not decrease below default of 200. Is this expected behavior? Is there another way I can decrease the size of width?

CSS works for text boxes:

#field1 input {width:150px;}

but not for the select HTML tag

#field2 select {width:150px;}

Re: Splunk 6 dropdown menu - decrease width

kensternberg — Fri, 06 Dec 2013 16:55:06 GMT

The WebFramework uses the jQuery-based Select2 Dropdown, which comes with its own set of CSS requirements. It looks to me that the authors of Select2 have chosen to enforce a CSS min-width of 200px in their CSS, right there in line 6 of their CSS file:

.select2-container{min-width:200px;margin-bottom:8px;}

You could override this by setting the min-width for the container object after the Select2 objects have been loaded:

#field2 .select2-container{ min-width: 150px; }

Doing this will allow your dropdowns to be 150px wide; you will still have to set the width on the control itself.

Re: Splunk 6 dropdown menu - decrease width

carmackd — Fri, 06 Dec 2013 19:47:30 GMT

excellent! this worked. thx!!

Re: Splunk 6 dropdown menu - decrease width

harshal_chakran — Thu, 06 Feb 2014 06:39:25 GMT

Can you share the name of the .css file were we have to override the function or make the mentioned changes.

Hi carmackd,
can you also share the html code to increase the width of dropdown

Re: Splunk 6 dropdown menu - decrease width

andygerber — Tue, 03 Jul 2018 22:08:22 GMT

I was able to increase the size of a multi-select with the following CSS and ID association.

   <input id="ms" type="multiselect" token="token_name">

In the CSS section:

    #ms.input.input-multiselect{ width: 400px !important; }

Re: Splunk 6 dropdown menu - decrease width

DataOrg — Wed, 19 Dec 2018 12:20:26 GMT

@andygerber its worked perfectly

Re: Splunk 6 dropdown menu - decrease width

AnilPujar — Thu, 03 Feb 2022 20:30:09 GMT

does this works for splunk 8.2.0 version?