topic Re: How to make a drop-down form wider? in Dashboards & Visualizations

How to make a drop-down form wider?

johnraftery — Fri, 20 May 2016 14:32:07 GMT

Hi,

I have a very simple UI question 🙂

The default width of drop-down boxes is too short to display enough information in my use case. Can it be extended?

Thanks,
John

Re: How to make a drop-down form wider?

somesoni2 — Fri, 20 May 2016 15:18:40 GMT

Have a look at these

https://answers.splunk.com/answers/114078/splunk-6-dropdown-menu-decrease-width.html
https://answers.splunk.com/answers/295879/how-can-i-extend-the-width-of-my-drop-down-box-in.html
https://answers.splunk.com/answers/298868/can-i-expand-the-length-of-a-drop-down-input-field.html

Re: How to make a drop-down form wider?

johnraftery — Mon, 23 May 2016 08:30:53 GMT

Thanks. I've had a look at these and they are probably what I need, but I don't understand how to convert the dashboard to HTML and then override the CSS. What exactly do I need to do?

Re: How to make a drop-down form wider?

johnraftery — Mon, 23 May 2016 08:50:29 GMT

I tried the CSS solution described here;
https://answers.splunk.com/answers/295879/how-can-i-extend-the-width-of-my-drop-down-box-in.html

But instead of making the inputbox wider, it shifted the rest of the row further to the right giving 500px of space. Is this the correct CSS?
#resized_input {
width: 500px;
}

Re: How to make a drop-down form wider?

markthompson — Mon, 23 May 2016 12:30:34 GMT

Hi there - that CSS is fine given that you have applied the ID to the tag. If you have it anywhere else, then it would push it.

Re: How to make a drop-down form wider?

johnraftery — Mon, 23 May 2016 17:26:23 GMT

I've applied the ID like this:

      <input type="dropdown" token="tps_logger_method" searchWhenChanged="true" id="resized_input">
        <label>Select a logger name</label>
        <search>
          <query>eventtype=mlc2 sourcetype=tps host=$host_token$ | table name | dedup name | sort name</query>
          <earliest>$time_token.earliest$</earliest>
          <latest>$time_token.latest$</latest>
        </search>
        <fieldForLabel>name</fieldForLabel>
        <fieldForValue>name</fieldForValue>
        <default>murex.limits.engine.stream.histo.TPSHistoCounter</default>
      </input>

And the stylesheet is referenced in the form tag like this:

<form script="table_cell_highlighting.js,simple_xml_examples:tokenlinks.js" stylesheet="table_cell_highlighting.css,single_decorations.css">

But it's still not working I'm afraid.

Re: How to make a drop-down form wider?

johnraftery — Mon, 23 May 2016 17:27:07 GMT

Do I need to restart splunk after updating the CSS?

Re: How to make a drop-down form wider?

Yunagi — Wed, 10 Jan 2018 13:29:42 GMT

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