Splunk 6 dropdown menu - decrease width

[carmackd]

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;}

[andygerber]

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; }

[AnilPujar]

does this works for splunk 8.2.0 version?

[DataOrg]

@andygerber its worked perfectly

[kensternberg · Accepted solution]

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.

[harshal_chakran]

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

[carmackd]

excellent! this worked. thx!!