Why can I not increase multiselect field input area width?

[wangkevin1029]

Hi, Splunkers,

I have my multiselect field ccs code as below: 

2nd part, 350px works for entire area width,   but 1st part looks not working as expected,  input area width not as  300px, or 340 px.

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

          {

            width: 300px; !important;

            max-width: 340px; !important;

          }

          #KeyWordID {

            width: 350px;

          }

thx, in advance.

Kevin

[bowesmana · Accepted solution]

This is what you need

#KeyWordID.input-multiselect {
    width: 350px !important;
}
#KeyWordID.input-multiselect div[role="listbox"]{
    width: 300px !important;
}

[wangkevin1029]

amazing, it works,   multiselect works. 

thank you very much.

Kevin

[ITWhisperer]

Try MultiDropdown rather than MultiSelect

[wangkevin1029]

Hi, ITWhisperer,

the input field type only has Dropdown,  or  Multiselect, no MultiDropdown.   my input field type is MultiSelect.

but I did change the type in css from Multiselect to MultiDropdown,   it didn't work, though.

Kevin

[ITWhisperer]

It doesn't matter what the input type is called, it matter what the component class is that is used to render the input. Which version of Splunk are you using as it could be that the component name has changed?

[wangkevin1029]

splunk version is 9.0.4.

component name ( ID) is correct,  cause 2nd part 350px works as expected.

Kevin

[ITWhisperer]

By component name, I meant the name of the component not the ID - have you tried this?

div[data-component="splunk-core:/splunkjs/mvc/components/MultiDropdown"]

[wangkevin1029]

yes,  1st response,  I did already  try   MultiDropdown, it didn't work.

Kevin

[ITWhisperer]

Try removing the semi-colon after the px and before the !important;

[wangkevin1029]

just tried, doesn't' work.

pretty sure this css is  been used ,  I changed the following 2nd part width, it works.

    #KeyWordID {

            width: 350px;

          }

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

          {

            width: 300px; !important;

            max-width: 340px; !important;

          }

          #KeyWordID {

            width: 350px;

          }