topic Re: How to use CSS to increase the width of a drop-down input? in Dashboards & Visualizations

How to use CSS to increase the width of a drop-down input?

johnraftery — Sun, 07 Jun 2020 23:58:58 GMT

Hi,

I have a lot of text in a drop-down - too much to display in the default window size. To make the box wider, 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 input box wider, it shifted the rest of the row further to the right giving 500px of space. This is the CSS I have applied:

#resized_input {
  width: 500px;
}

And this is where I reference the id:

   <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>

Can anyone see what I'm doing wrong?

Thanks!

Re: How to use CSS to increase the width of a drop-down input?

rjthibod — Tue, 18 Jul 2017 18:17:34 GMT

You are only extending the top-level wrapper of the dropdown, not the actual dropdown item menu. Try this instead.

#resized_input {
  min-width: 500px !important;
  width: 500px !important;
  max-width: 500px !important;
}
#resized_input .splunk-dropdown .select2-container {
  min-width: 500px !important;
  width: 500px !important;
  max-width: 500px !important;
}

Re: How to use CSS to increase the width of a drop-down input?

gjanardh — Fri, 02 Nov 2018 00:59:19 GMT

Did this work for increasing the drop down width? I added a drop down with id as "resized_input" but noticed extra space after dropdown, but it did not increase drop down width.

Added the above style to prebuilt panel

  <style>
     #resized_input {
      min-width: 500px !important;
      width: 500px !important;
      max-width: 500px !important;
    }
    #resized_input .splunk-dropdown .select2-container {
      min-width: 500px !important;
      width: 500px !important;
      max-width: 500px !important;
    }
  </style>
</html>

Re: How to use CSS to increase the width of a drop-down input?

rjthibod — Fri, 02 Nov 2018 11:02:32 GMT

They might have changed something that makes my old solution fail.

Try this instead. Comes from something I posted here: https://gist.github.com/thibodux/408a685dc1a46af5f4f73f7c2922e47e

<style>
  .input-dropdown > .splunk-dropdown > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
  }

  #resized_input {
    width: 500% !important;
  }
</style>

You can also look at the Layer8Insight App for Splunk. I used to maintain that and change CSS widths all over it.

Re: How to use CSS to increase the width of a drop-down input?

gjanardh — Fri, 02 Nov 2018 14:05:21 GMT

Thanks for your response rjthibod. Still I see space after the dropdown, but the actual drop down is not extended. We are on version 7.1.2.

My pre built panel is now like.

  <style>         
    .input-dropdown > .splunk-dropdown > div {
      width: 400px !important;
      max-width: 400px !important;
      min-width: 400px !important;
    }
  #resize_input {
    width: 400px !important;
  }
  </style>
</html>

Re: How to use CSS to increase the width of a drop-down input?

rjthibod — Fri, 02 Nov 2018 14:22:44 GMT

Can you post the XML for the dropdown input? It looks like the ids might be different resize_input versus resized_input.

Re: How to use CSS to increase the width of a drop-down input?

gjanardh — Fri, 02 Nov 2018 14:32:24 GMT

Here is the extract from my Simple XML

form
......

<input id="resize_input" type="dropdown" token="dName" searchWhenChanged="true">

.....

<html>
  <style>         
    .input-dropdown > .splunk-dropdown > div {
      width: 400px !important;
      max-width: 400px !important;
      min-width: 400px !important;
    }
    #resize_input {
      width: 400px !important;
    }
</style>
</html>

/form

Re: How to use CSS to increase the width of a drop-down input?

rjthibod — Fri, 02 Nov 2018 21:46:50 GMT

So, of course, Splunk changed thins. The CSS you want is something like this (top line changed)

#resize_input > .splunk-dropdown > div:nth-child(1) {
  width: 400px !important;
  max-width: 400px !important;
  min-width: 400px !important;
}
#resize_input {
  width: 400px !important;
}

Unfortunately, it appears you can't use this inline in the XML as you are currently trying. You will have to put the settings in a CSS file in the app and load that CSS file into the panel.

See https://docs.splunk.com/Documentation/Splunk/7.2.0/AdvancedDev/UseCSS

Re: How to use CSS to increase the width of a drop-down input?

gjanardh — Fri, 02 Nov 2018 22:55:20 GMT

Thank you. Will try with css, instead of using in simple xml.

Re: How to use CSS to increase the width of a drop-down input?

ssteinmann — Wed, 20 Mar 2019 13:21:55 GMT

Hi, unfortunately this will not work for me in 7.2.1. Is there another possiblity to increase the width for a dropdown input?
Other input types can be changed with placing css style directly in the xml Dashboard or using seperate dashboard.css file.
I tried both for the dropdown type without success. Any ideas?

XML dashboard:

<form>
  <label>dropdown_test</label>
  <fieldset submitButton="false">
    <input id="resize_input" type="dropdown" token="field1">
      <label>field1</label>
      <fieldForLabel>droplist</fieldForLabel>
      <fieldForValue>droplist</fieldForValue>
      <search>
        <query>| makeresults count=5
| eval droplist=random()</query>
      </search>
    </input>
  </fieldset>
</form>

dashboard.css:

 #resize_input > .splunk-dropdown > div:nth-child(1) {
   width: 400px !important;
   max-width: 400px !important;
   min-width: 400px !important;
 }
 #resize_input {
   width: 400px !important;

thanks
Stefan

Re: How to use CSS to increase the width of a drop-down input?

vnravikumar — Wed, 20 Mar 2019 16:44:09 GMT

Try this

<form>
  <label>dropdownsize</label>
  <fieldset>
    <input type="dropdown" token="tps_logger_method" searchWhenChanged="true" id="resized_input">
      <label>Select a logger name</label>
      <default>murex.limits.engine.stream.histo.TPSHistoCounter</default>
      <choice value="murex.limits.engine.stream.histo.TPSHistoCounter">murex.limits.engine.stream.histo.TPSHistoCounter</choice>
    </input>
  </fieldset>
  <row depends="$hide$">
    <panel>
      <html>
        <style>
          #resized_input  div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"]{
            width: 500px !important;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

Re: How to use CSS to increase the width of a drop-down input?

ssteinmann — Thu, 21 Mar 2019 08:25:31 GMT

Thank you, this is perfectly working for me!

Re: How to use CSS to increase the width of a drop-down input?

BigCosta — Thu, 19 Dec 2019 17:44:51 GMT

Hi!
This work in Splunk versions 7 and 8

  <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>
  <row depends="noshow">
    <panel>
      <html>
       <style>
        #resized_input { width: 500px; }
        #resized_input [data-component] { width: auto !important; }
       </style>
      </html>
    </panel>
  </row>

This work on all inputs: radio, dropdown, checkbox, multiselect, link, time.
But on multiselect input you need to set the width exactly to size.
Example:

#multiselect_input { width: 500px; }
#multiselect_input [data-component] { width: 500px !important; }

Re: How to use CSS to increase the width of a drop-down input?

jamieadahan — Mon, 17 Feb 2020 10:17:53 GMT

the auto option is working fine for my multi-select

Re: How to use CSS to increase the width of a drop-down input?

santosh_sshanbh — Thu, 21 May 2020 15:07:30 GMT

Thanks this worked for me.