3

This question already has an answer here:

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%?

marked as duplicate by glls, Pranay Jaiswal, Reshma, battery.cord, Lukas Lunow Mar 21 at 13:41

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • did you try min-width ? – glls Mar 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 at 14:00
  • the screenshot seems to imply that the class name is being properly handled by the component – glls Mar 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 at 14:14
  • Actually - you wont be able to =( – glls Mar 19 at 14:42
2

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

  • 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 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 at 17:50
3

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.

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

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