Im having an issue with lightning-layout / lightning-layout-item when the item contains an accordion, if I give an accordion a very long label (that exceeds the container) by default SF should truncate it or wrap, however as you can see from the below image the label exceeds the container.

I dont want to manually trim the value as I want it to display the maximum on every device screen size possible / change dynamically when someone changes screen size. can anyone see what i am doing wrong here?

enter image description here


    <!--Object Links-->            
    <lightning-accordion allow-multiple-sections-open class="accordionClass">
            <lightning-layout-item size="12">
                <div class="slds-tabs_card">
                        <lightning-layout-item class="checkbox" flexibility="no-grow" alignment-bump="bottom">
                            <lightning-input class="checkbox" type="checkbox" onchange={onSelected} checked={checkboxCheck}>

                        <lightning-layout-item flexibility="grow">
                            <!--Object Link Section, Dynamic size based on display-->
                            <lightning-accordion-section name={id} label={heading}>

                                <!--Options Menu System-->
                                <lightning-button-menu slot="actions" onselect={handleOnselect} alternative-text="Show menu"
                                    <template for:each={menuOptions} for:item="option">
                                        <lightning-menu-item label={option.label} value={option.value} key={option.value}>


1 Answer 1


The Salesforce Lightning Design System (SLDS) CSS won't work correctly unless you follow the rules. In this case, a lightning-accordion-section should be placed directly inside the lightning-accordion. That's why your template isn't working the way you think it should. Given what you're trying to do, the accordion should probably be inside a lightning-card, or perhaps just do everything manually with a lightning-button-icon-stateful to toggle the contents.

Below is some incomplete code that should help you get started.

  <h1 slot="title" class="slds-truncate">
    <lightning-input type="checkbox" onchange={onSelected} checked={checkboxCheck}>
    <lightning-button-icon icon-name={chevronIcon} onclick={toggleContent}>
  <lightning-button-menu slot="actions">
    <!-- menu items here -->
  <template lwc:if={contentOpen}>

You must log in to answer this question.

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