How can I extend the width of my drop down box in my dashboard?

[MichaelPriest]

I'd like to extend the width of my drop down box in my dashboard because the source names are quite long and i'd like it all to show. How can I do this in XML without having to convert to HTML?

Below is my XML for the drop down:

  <fieldset autoRun="true" submitButton="false" searchWhenChanged="true">
    <input type="dropdown" token="sourcetoken" searchWhenChanged="true">
      <label>Select a Source:</label>
      <search>
        <query>**My Search Query**</query>
      </search>
      <default>Select...</default>
      <fieldForLabel>source</fieldForLabel>
      <fieldForValue>source</fieldForValue>
    </input>
  </fieldset>

And a image of what it currently looks like:

[BigCosta]

Hi!
Here is my solution to the problem
https://answers.splunk.com/answers/423824/how-to-use-css-to-increase-the-width-of-a-drop-dow.html

[jeffland · Accepted solution]

You won't be able to do this in Simple XML I'm afraid, but you can use CSS for that. Give your input an id like this:

<input type="dropdown" token="sourcetoken" searchWhenChanged="true" id="resized_input">

And use the following code in a CSS file applied to your dashboard:

#resized_input {
    width: 300px;
}

You can change the width to your liking.

UPDATE: apparently, changes in recent versions require a different CSS selector. See comment by @rjthibod here for details.

[nick405060]

This does not work for multiselect in Splunk 7.2.

[bcronrath]

Hi Jeff, this doesn't seem to be working for me. I did get my css to apply, but it only seems to be changing the width of some imaginary box around the dropdown but not the actual dropdown itself. So effectively all it does is make content to the right mash into the dropdown. Is there a way I can somehow set the id on the div that actual controls the visual portion of the dropdown as well?

[bcronrath]

more specifically to use an example of what the css looks like:

 <label for="resized_input_3229">Region</label>
    <div id="resized_input_3229" class="splunk-dropdown splunk-choice-input splunk-view">
    <div class="select2-container select2-allowclear" id="s2id_autogen45" style="display: inline-block; width: 200px;">

I need to somehow manually apply css to that last part that seems to hardcode the width to 200px. Have you been able to get around this?

[jeffland]

Are you on a html dashboard? The solution above is for Simple XML dashboards.

[Yunagi]

This solution worked for me:
https://answers.splunk.com/answers/114078/splunk-6-dropdown-menu-decrease-width.html

[MichaelPriest]

Thanks, I'll convert it to HTML once I've finished

[jeffland]

There's no need to do that, if you weren't planning on doing that either way don't do it to apply CSS. See the link I provided, the file is dynamically applied to your dashboard even if it's based on Simple XML.