3

Given the following:

<div style="display:inline-block">
    <lightning-button style="..." class="..." onclick={...} label="..."></lightning-button>
</div>

How can I adjust the width of the Lighting-Button?

I essentially want all my buttons to be the same width for UX purposes.

I have already tried the suggestions in various other posts (using CSS) with no luck.

4

You can't. The button inside is designed to only be as large as it needs to be. I took a look at the code, and it renders like this:

<lightning-button c-app_app="" class="button-classes">
    <button type="button" class="slds-button slds-button_neutral">
        Demo
    </button>
</lightning-button>

Where button-classes is whatever you put in to the class attribute:

<lightning-button class="button-classes" label="Demo"></lightning-button>

Therefore, it seems reasonable that nothing you do will work, short of writing your own custom component. As frustrating as that is, that's the current state of affairs until the component or the related CSS is fixed.

  • Thanks for the quick response and the thorough answer. – Mr. B Oct 11 '19 at 16:42
3

After looking a little further into accomplishing what I'm asking, and reading up on the Lightning Design System, I figured out that you can use a regular button tag to accomplish what I'm trying to do (instead of the Lightning-Button tag), while also retaining the Salesforce style:

<button class="slds-button slds-button_neutral slds-button_stretch" onclick={...}>...</button>

Notice that you can still bind the onclick event to your LWC JS class using the curly braces. Also, notice the label attribute text content is simply moved to inside the button tag.

Because the button tag is standard HTML5, you can also use the style attribute to define custom CSS in the following fashion:

<button class="..." style="width:250px" onclick={...}>...</button>

Reference: https://www.lightningdesignsystem.com/components/buttons/#Stretch

  • After figuring this out, I felt like perhaps I'm doing a lot of things the wrong way by using the baked-in lightning tags, but of course tags like <lightning-input-field> contain richness that would require a lot of customization to mimic. – Mr. B Oct 11 '19 at 20:40
0

You can! Add the slds class:-

<lightning:button  class="slds-button_stretch slds-size_6-of-12" ...

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.