0

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

My LWC

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

                        <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"
                                    menu-alignment="right">
                                    <template for:each={menuOptions} for:item="option">
                                        <lightning-menu-item label={option.label} value={option.value} key={option.value}>
                                        </lightning-menu-item>
                                    </template>
                                </lightning-button-menu>

                            </lightning-accordion-section>
                        </lightning-layout-item>
                    </lightning-layout>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-accordion>
</template>

1 Answer 1

0

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.

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

You must log in to answer this question.

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