Dashboards & Visualizations
Highlighted

Splunk 6 dropdown menu - decrease width

Communicator

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

Re: Splunk 6 dropdown menu - decrease width

Splunk Employee
Splunk Employee

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.

View solution in original post

Highlighted

Re: Splunk 6 dropdown menu - decrease width

Communicator

excellent! this worked. thx!!

Highlighted

Re: Splunk 6 dropdown menu - decrease width

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

Highlighted

Re: Splunk 6 dropdown menu - decrease width

Path Finder

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

Re: Splunk 6 dropdown menu - decrease width

Builder

@andygerber its worked perfectly

0 Karma