Dashboards & Visualizations

Increase the drop down width

harshal_chakran
Builder

Hi,
I have a dropdown code as below.


<input type="dropdown" token="user1" searchWhenChanged="true" style="width:700px;">

  <label>Select The KPI</label>

 <default>DropDown Title</default>

<choice value="1">dropdown element no one</choice>

<choice value="2">dropdown element no two</choice>

<choice value="3">dropdown element no third</choice>

<choice value="4">dropdown element no. fourth- with no data call stack </choice>



</input>

On selection of a longer content, such as "dropdown element no. fourth- with no data call stack". The dropdown doesnt show the entire string.

alt text
Is there any way to increase the width size of dropdown, so as to achieve this.

Please Help...!!!

0 Karma
1 Solution

odgarrigues_spl
Splunk Employee
Splunk Employee

See this http://answers.splunk.com/answers/114078/splunk-6-dropdown-menu-decrease-width.html

Alternatively, you can use the !important tag to supercharge any default CSS settings (thanks to Johan!).
Put this directly in the .css referenced in your dashboard:
.select2-container{min-width:500px !important;margin-bottom:8px;}

For a multiselect dropdown:
.select2-container-multi{min-width:500px !important;margin-bottom:8px;}

View solution in original post

odgarrigues_spl
Splunk Employee
Splunk Employee

See this http://answers.splunk.com/answers/114078/splunk-6-dropdown-menu-decrease-width.html

Alternatively, you can use the !important tag to supercharge any default CSS settings (thanks to Johan!).
Put this directly in the .css referenced in your dashboard:
.select2-container{min-width:500px !important;margin-bottom:8px;}

For a multiselect dropdown:
.select2-container-multi{min-width:500px !important;margin-bottom:8px;}

Get Updates on the Splunk Community!

Introducing the Splunk Community Dashboard Challenge!

Welcome to Splunk Community Dashboard Challenge! This is your chance to showcase your skills in creating ...

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...