Dashboards & Visualizations

Why can I not increase multiselect field input area width?

wangkevin1029
Communicator

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;

          }

wangkevin1029_0-1676644752181.png

 

thx, in advance.

 

Kevin

 

Labels (1)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

This is what you need

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

 

View solution in original post

bowesmana
SplunkTrust
SplunkTrust

This is what you need

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

 

wangkevin1029
Communicator

amazing, it works,   multiselect works. 

thank you very much.

 

Kevin

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

Try MultiDropdown rather than MultiSelect

0 Karma

wangkevin1029
Communicator

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

 

 

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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?

0 Karma

wangkevin1029
Communicator

splunk version is 9.0.4.

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

Kevin

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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

 

0 Karma

wangkevin1029
Communicator

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

 

Kevin

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust

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

0 Karma

wangkevin1029
Communicator

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;

          }

0 Karma
Get Updates on the Splunk Community!

Demo Day: Strengthen Your SOC with Splunk Enterprise Security 8.1

Today’s threat landscape is more complex than ever. Security operation centers (SOCs) are overwhelmed with ...

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...