0

I am successfully using the following code to collect a user's multiple input selections. I don't like how the select box is a certain height regardless of the # of options displayed. I would like to alter the height of the input box. Ideally I would do this based on the # of options available, but just being able to make it shorter will be sufficient. Thoughts?

        <lightning:layoutItem size="12">
        <ui:inputSelect aura:id="filterByOrganization"
                        class="multiple"
                        multiple="true"
                        value="{!v.selection}"
                        change="{!c.selectOrganization}">
            <aura:iteration items="{!v.values}" var="item">
                <ui:inputSelectOption text="{!item.key}"
                                      label="{!item.value}"/>
            </aura:iteration>
        </ui:inputSelect>
    </lightning:layoutItem>
1
  • ui:inputSelect is deprecated please use the lightning:select Commented Jan 7, 2020 at 2:37

2 Answers 2

1

got its style from HTML you need to use important in CSS to override is below is the example

<aura:application extends="force:slds" >
    <ui:inputSelect class="single" aura:id="InputSelectSingle" change="{!c.onSingleSelectChange}">

            <ui:inputSelectOption text="Any"/>
            <ui:inputSelectOption text="Open" value="true"/>
            <ui:inputSelectOption text="Closed"/>
            <ui:inputSelectOption text="Closed Won"/>
            <ui:inputSelectOption text="Prospecting"/>
            <ui:inputSelectOption text="Qualification"/>
            <ui:inputSelectOption text="Needs Analysis"/>
            <ui:inputSelectOption text="Closed Lost"/>
    </ui:inputSelect>
</aura:application>

and the CSS

.THIS.single{
    height : 50px !important;
}

Please let me know if you are looking for this. UI:# elements are deprecated so please do not use unless no other options are available.

3
  • Looking at the documentation for lightning:select, it doesn't support multiselect, so I'm wondering with ui elements being deprecated what the intended choice would be within Aura
    – nbrown
    Commented Jan 7, 2020 at 13:25
  • When I look at Chrome's Developer's tools, I see that there is a Size option that is set to 7. I can change that in the Developer's tools and can adjust the number of select options that display. However, when I try to set that option in my component, I receive a message that it is an invalid attribute. Commented Jan 7, 2020 at 16:15
  • @Avijit Chakraborty I needed to put a space between .THIS and .MULTIPLE to get the CSS height option to work. There seems like there should be a way to set the # of rows that display in a inputSelect. When I look at the code in the Chrome developer's tools, I see that there is a size="7" option. I can change it in the developer tools. I can't see a way to change it in Salesforce. Thoughts? Commented Jan 7, 2020 at 16:22
0

As as alternative to ui:inputSelect you can use lightning:dualListbox for building multi select picklist. lightning:dualListbox component has size attribute that can be used to control the height of the component based on number of options available.

<aura:attribute name ="len" type="integer" default="2"/>

<lightning:dualListbox name="languages"
                           label= "Select Languages"
                           sourceLabel="Available"
                           selectedLabel="Selected"
                           fieldLevelHelp="Select your preferred languages"
                           options="{!v.options}"
                           size="{!v.len}"/>

lightning:dualListbox documentation : https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox/specification

in case, dualListBox is not the one you want as per the UI design, then maybe you can use HTML select and options tag. I tried that in my dev org and the size can be set from an aura:attribute but working with selected elements from this select element will be adding complexity.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .