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

AnilPujar
Path Finder

does this works for splunk 8.2.0 version?

0 Karma

DataOrg
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.

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!!

Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...