topic Re: Dropdown width change not working properly in Dashboards & Visualizations

Dropdown width change not working properly

wangkevin1029 — Sat, 19 Feb 2022 02:49:26 GMT

Hi, Splunkers，

I used the following code to change my dropdown input width,

       .input-dropdown {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }
        .splunk-dropdown .select2-container {
          min-width: 120px !important;
          width: 120px !important;
          max-width: 120px !important;
        }

when I changed width, the width of the dropdown area decreased, but the dropdown field width not change, which caused the dropdown overlapped with the next dropdown.

I tried some different combination of these widths, also the following HTML text/css, also margin-bottom, etc, etc, but whatever I tried, only the width of whole area dropdown changed, never worked for the dropdown box width.

I also tried the following CSS code, but have the same issue.

    <html>
      <style type="text/css">
#input_unit {
  width: 440px;
}
      </style>
    </html>

thx in advance.

Kevin

Re: Dropdown width change not working properly

ITWhisperer — Sat, 19 Feb 2022 10:10:23 GMT

Try something like this

<html> <style type="text/css"> #input_unit div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"] { width: 440px; !important; } </style> </html>

Re: Dropdown width change not working properly

wangkevin1029 — Sat, 19 Feb 2022 15:54:44 GMT

ITWhisperer，

thx for your quick response.

I put your code in front of my dropdown id TargetSEValidationid.

unfortunately, width change not working here, I attached a screenshot below.

besides, this code looks inserts a line break before it. whatever width I put here, there is always just a line break.

I am pretty sure, this code causes this line break.

<html>

#TargetSEValidationid div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"]

{

width: 100px; !important;

}

</style>

</html>

<label>TargetSEValidation</label>

<choice value="FALSE">FALSE</choice>

</input>

Kevin

Re: Dropdown width change not working properly

ITWhisperer — Sat, 19 Feb 2022 20:48:41 GMT

Two things: you could try adding max-width: as well as width, and also the changes don't show up in edit mode, you have to save the changes

Re: Dropdown width change not working properly

wangkevin1029 — Sat, 19 Feb 2022 22:45:48 GMT

Hi, ITWhisperer,

Now I added max-width, it looks better, but not fully working, now, field box width changed, but area width not changed.

before I added max-width, area width decreased, but field box not changed.

#TargetSEValidationID div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"]

{

width: 120px; !important;

max-width: 140px; !important;

}

Kevin

Re: Dropdown width change not working properly

ITWhisperer — Sat, 19 Feb 2022 23:26:28 GMT

Sorry, my mistake. There was an extra semi-colon which should be removed.

<html> <style type="text/css"> #TargetSEValidationID div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"] { max-width: 140px !important; width: 120px !important; } </style> </html>

Re: Dropdown width change not working properly

wangkevin1029 — Sat, 19 Feb 2022 23:46:44 GMT

just tried， after removing semi-colon, box width showing some difference, but area width still no change.

basically, I have many input fields here, want to shrink them to save some space.

if only box width is decreased, it won't save any space.

Kevin

Re: Dropdown width change not working properly

wangkevin1029 — Sun, 20 Feb 2022 02:42:49 GMT

I added another css here, it works now, not sure why, but it works beautifully as I expected.

thank you very much.

#TargetSEValidationID {

width: 140px;

}

#TargetSEValidationID div[data-component="splunk-core:/splunkjs/mvc/components/Dropdown"]

{

width: 120px; !important;

max-width: 140px; !important;

}

#TargetSEValidationID {

width: 140px;

}