Dashboards & Visualizations

Splunk 6 dropdown menu - decrease width

carmackd
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;}
1 Solution

kensternberg
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

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

premranjithj
Builder

@andygerber its worked perfectly

0 Karma

kensternberg
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

harshal_chakran
Builder

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
Communicator

excellent! this worked. thx!!