function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
David Cohen 15David Cohen 15 

Unable to stretch <lightning-button> tag to fill container

I'm unable to stretch a <lightning-button> to occupy the full width of its container. While applying a style of display: block or a class of slds-size_12-of-12, for example, those styles/classes are applied to the lightning-button tag... however... when rendered, the tag appears to wrap an inner <button> tag, and the styles are not transferred to that tag, and it's that inner tag that appears to have all the content. 
<lightning-layout>
    <lightning-layout-item flexibility="grow">
        <lightning-button
            label="click me"
            onclick={action}
            class="slds-size_12-of-12">
        </lightning-button>
    </lightning-layout-item>

    <lightning-layout-item flexibility="no-flex">
        ...
User-added image
User-added image
Alain CabonAlain Cabon
Hi, 
<aura:application extends="force:slds">
    <lightning:layout>
        <lightning:layoutItem  flexibility="grow">
            <lightning:button
                              label="click me"
                              class="slds-size_12-of-12 slds-button slds-button_neutral slds-button_stretch">
            </lightning:button>
        </lightning:layoutItem >
    </lightning:layout>
</aura:application>

 
David Cohen 15David Cohen 15
Alain, if you look closer at my code, you'll see that I'm using new Lightning Web Components, and not the old Aura framework. <lightning-button>, not <lightning:button>. The stretch class, among others, does not appear to work with the LWC button. But thanks.