Splunk Search

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

MichaelPriest
Communicator

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:
alt text

1 Solution

jeffland
SplunkTrust
SplunkTrust

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.

View solution in original post

BigCosta
Path Finder
0 Karma

jeffland
SplunkTrust
SplunkTrust

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
Motivator

This does not work for multiselect in Splunk 7.2.

0 Karma

bcronrath
Path Finder

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?

0 Karma

bcronrath
Path Finder

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?

0 Karma

jeffland
SplunkTrust
SplunkTrust

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

0 Karma

Yunagi
Communicator
0 Karma

MichaelPriest
Communicator

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

0 Karma

jeffland
SplunkTrust
SplunkTrust

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.

0 Karma
Get Updates on the Splunk Community!

App Building 101 - Build Your First App!

WATCH RECORDING NOW   Tech Talk: App Dev Edition Splunk has tons of out-of-the-box functionality, and you’ve ...

Introducing support for Amazon Data Firehose in Splunk Edge Processor

We’re excited to announce a powerful update to Splunk Data Management with added support for Amazon Data ...

The Observability Round-Up: September 2024

What’s up Splunk Community! Welcome to the latest edition of the Observability Round-Up, a monthly series in ...