Solved: Dropdown width change not working properly

wangkevin1029 · ‎02-18-2022

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

ITWhisperer · ‎02-19-2022

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>

View solution in original post

ITWhisperer · ‎02-19-2022

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>

wangkevin1029 · ‎02-19-2022

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

ITWhisperer · ‎02-19-2022

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

wangkevin1029 · ‎02-19-2022

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

ITWhisperer · ‎02-19-2022

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>

wangkevin1029 · ‎02-19-2022

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;

}

wangkevin1029 · ‎02-19-2022

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

Dropdown width change not working properly

panel

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...

Alerting Best Practices: How to Create Good Detectors

Discover Powerful New Features in Splunk Cloud Platform: Enhanced Analytics, ...