topic Re: How can I extend the width of my drop down box in my dashboard? in Splunk Search

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

MichaelPriest — Thu, 13 Aug 2015 08:44:18 GMT

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:

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

jeffland — Thu, 13 Aug 2015 09:04:36 GMT

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.

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

MichaelPriest — Thu, 13 Aug 2015 09:28:20 GMT

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

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

jeffland — Thu, 13 Aug 2015 09:33:27 GMT

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.

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

bcronrath — Tue, 25 Oct 2016 21:29:22 GMT

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?

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

bcronrath — Tue, 25 Oct 2016 21:33:47 GMT

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?

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

jeffland — Wed, 26 Oct 2016 11:33:56 GMT

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

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

Yunagi — Wed, 10 Jan 2018 13:28:32 GMT

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

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

nick405060 — Tue, 07 May 2019 19:44:55 GMT

This does not work for multiselect in Splunk 7.2.

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

BigCosta — Thu, 19 Dec 2019 18:50:25 GMT

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