1

I have a below combobox in the HTML:

<lightning-layout>
        <lightning-layout-item>
            <lightning-combobox class="slds-cell-wrap slds-text" label="combo-box" options={comboOptions}>
            </lightning-combobox>
        </lightning-layout-item>
</lightning-layout>

JS:

comboOptions = [{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
{ value: 'This is a very very long label', label: 'This is a very very long label' },
];

it renders like below:

enter image description here

If the option string is longer then it truncates the string, I tried using slds-cell-wrap but still options are being truncated instead of wrapping, could someone please suggest how to wrap the combobox options.

Update using below component from the lightning base component recipe doesn't have an option property instead tried to set items property but it shows something like below

enter image description here

Please confirm if is there any way to wrap the option text of combobox

2
  • Did you ever find a good option for this or did you go down the route of you making your own combobox? Feb 22 at 14:12
  • Unfortunately, no in house solution so far.
    – gs650x
    Feb 22 at 17:32
1

Consider building a custom combobox component, if you need text wrapping. Easiest approach would be to create a replica of the base components involved. You can check out the source code here for baseCombobox & baseComboboxItem components. A one line code change (i.e., remove the slds-truncate) in your replicated custom component's inline.html file of baseComboboxItem should work. Note that I've personally not tried this out, but should be possible.


You cannot use class attribute (CSS) on the LWC base component (combobox) or unless SF provides a new attribute (or some kind of variant). Reason being,

  1. CSS styles defined in a parent component don’t leak into a child (ref)
  2. Don’t depend on the internal markup or CSS classes of a base Lightning component as they can change in future releases. You can’t override the style for a base Lightning component (ref)
  3. Base components provide a class attribute so that you can add a utility class or custom class to the outer elements of the components (ref)

As mentioned in point # 3, the slds you specify in class attribute doesn't get applied to the inner elements of the component.

Combobox would get rendered something like this in chrome (below HTML shows only for one element). Note that innermost span element has the slds-truncate which causes option labels to get truncated. Point # 2 mentioned above recommends not to depend on this current HTML structure for styling.

<div lightning-basecombobox_basecombobox="" id="dropdown-element-341" data-dropdown-element="true" role="listbox" class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid slds-dropdown_left">
    <lightning-base-combobox-item lightning-basecombobox_basecombobox="" data-item-id="input-341-0" data-value="This is a very very long label" role="option" id="input-341-0-341" class="slds-media slds-listbox__option slds-media_center slds-media_small slds-listbox__option_plain" aria-selected="false">
        <span class="slds-media__figure slds-listbox__option-icon"></span>
        <span class="slds-media__body">
            <span title="This is a very very long label" class="slds-truncate">This is a very very long label</span>
        </span>
    </lightning-base-combobox-item>
</div>
4
  • Thank you for your response, but I tried to follow your answer but not able to render a combobox using the base combobox and the code that you have posted throws error "invalid attribute ightning-basecombobox_basecombobox=", please suggest
    – gs650x
    Sep 25 '20 at 5:52
  • Could you update the question with some details of what you have tried out?
    – arut
    Sep 25 '20 at 5:54
  • I tried to render c-base-combobox and it is showing a picklist without any options and a placeholder , there is no API property which I can set for the options
    – gs650x
    Sep 25 '20 at 5:56
  • I have updated my question, please suggest.
    – gs650x
    Sep 25 '20 at 6:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.