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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...