8

I have built a form using lightning-record-edit-form & have added a button to it using lightning-button. I want the button to have 100% width, so I added a class to lightning-button that sets display:block and width:100% but I'm not getting the results I was hoping for.

Here is the relevant markup:

<lightning-button 
   type="submit" 
   variant="brand" 
   label="Create Case" 
   class="stretchButton slds-p-top_x-small"></lightning-button>

And here is the CSS definition:

.stretchButton {display:block; width: 100%;}

And here's a screenshot of the result in the console. enter image description here

As you can see, lightning-button element has been set to 100% width, but the underlying button element has not.

Does anyone have any advice on how to set the underlying button's width to 100%?

5
  • did you try min-width ?
    – glls
    Mar 19 '19 at 13:57
  • class doesn't seem to be an attribute for lightning-button, so I doubt if having anything there will have any effect.
    – Jayant Das
    Mar 19 '19 at 14:00
  • the screenshot seems to imply that the class name is being properly handled by the component
    – glls
    Mar 19 '19 at 14:06
  • @glls: Yes, lightning-button is at a 100%. But the underlying button is not. In the template markup there is only one element called lightning-button, but in the HTML output, a child element called button is added. It is this child I am trying to affect. But sadly since it's not in my template, I'm not sure how to do that.
    – Jack Odell
    Mar 19 '19 at 14:14
  • Actually - you wont be able to =(
    – glls
    Mar 19 '19 at 14:42
13

You can't style the underlying button of a <lightning-button>.

There is an SLDS class for this though:

<button type="submit" class="slds-button slds-button_brand slds-button_stretch">Create Case</button>

Edit clarification:

As glls pointed out below and elsewhere, you can't style child components from parents (or siblings for that matter) due to LWC's use of Shadow DOM.

When you apply the classes below to the lightning-button, you actually get a "button" within a button, as you can kind of see in the screenshot of the LWC Button and can see more clearly when using developer tools to inspect the elements.

    <div class="slds-p-around_small">
        <button type="submit" class="slds-button slds-button_brand slds-button_stretch">HTML Button</button>
        <lightning-button variant="brand" label="LWC Button" title="LWC Button" class="slds-button slds-button_brand slds-button_stretch"></lightning-button>
    </div>

screenshot

4
  • 1
    thanks! That did it! I had tried slds-button_stretch on its own, but I had not tried to use it in conjunction with slds-button and slds-button_brand. When all three are used, the underlying button will stretch to the available width.
    – Jack Odell
    Mar 19 '19 at 17:44
  • One minor edit on your answer to help others in the future: could you change the element to lightning-button instead of button.
    – Jack Odell
    Mar 19 '19 at 17:50
  • 1
    this doesn't aesthetically works with neutral buttons since both the buttons have border and both borders are visible Oct 1 '19 at 11:21
  • 1
    I would recommend NOT using this method. First, this poses some accessibility issues due to the focus being buried on the "inner" button. Second the hover states get too confusing.
    – David
    Jul 13 '20 at 20:15
8

Basically, you wont be able to change it because styles defined in a component’s style sheet are scoped to the component and your CSS cannot reach into the child component of the lightning-button component. You will have to add your own custom button:

button-lwc

<button type="button" name="Submit Case" value="Submit Case" class="stretchButton slds-button slds-button_brand" onclick={handleClick} >Submit Case</button>

button.css

.stretchButton{
    display:block;
    min-width: 100%;
}

enter image description here

the first button is the namespaced lighnting-button component, the second one is the slds blueprint.

3
  • 1
    +1 beauty of shadow dom. Mar 19 '19 at 14:54
  • Sorry. but Jake's answer is better.
    – Jack Odell
    Mar 19 '19 at 17:46
  • its fine =), as long as you have been served
    – glls
    Mar 19 '19 at 17:49

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