topic Re: Why can I not increase multiselect field input area width? in Dashboards & Visualizations

Why can I not increase multiselect field input area width?

wangkevin1029 — Fri, 17 Feb 2023 15:38:59 GMT

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

Re: why can I not increase multiselect field input area width?

ITWhisperer — Fri, 17 Feb 2023 14:53:33 GMT

Try MultiDropdown rather than MultiSelect

Re: why can I not increase multiselect field input area width?

wangkevin1029 — Fri, 17 Feb 2023 15:27:35 GMT

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

Re: why can I not increase multiselect field input area width?

ITWhisperer — Fri, 17 Feb 2023 15:47:35 GMT

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?

Re: why can I not increase multiselect field input area width?

wangkevin1029 — Fri, 17 Feb 2023 15:53:21 GMT

splunk version is 9.0.4.

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

Kevin

Re: why can I not increase multiselect field input area width?

ITWhisperer — Fri, 17 Feb 2023 16:37:21 GMT

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

Re: why can I not increase multiselect field input area width?

wangkevin1029 — Fri, 17 Feb 2023 19:14:41 GMT

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

Kevin

Re: why can I not increase multiselect field input area width?

ITWhisperer — Fri, 17 Feb 2023 19:20:28 GMT

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

Re: why can I not increase multiselect field input area width?

wangkevin1029 — Fri, 17 Feb 2023 23:08:07 GMT

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;

}

Re: Why can I not increase multiselect field input area width?

bowesmana — Mon, 20 Feb 2023 02:47:47 GMT

This is what you need

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

Re: Why can I not increase multiselect field input area width?

wangkevin1029 — Mon, 20 Feb 2023 15:31:37 GMT

amazing, it works, multiselect works.

thank you very much.

Kevin