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.
I have fixed it by creating a style for the label and for the radio button:
label {
float: left;
width: 150px;
margin-left: 20px;
text-align: left;
}
.radioB input, .radioB label{
float:none;
display:inline;
width: 30px;
}
It is a little bit fragile since it relies on the SLDS style class slds-table_header-fixed_container but this sets an (exaggeratedly large) min-height on the header div that gets rendered into the markup for the table.
.THIS .slds-table_header-fixed_container {
min-height: 12em;
}
Best Answer
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:
Where
button-classesis whatever you put in to the class attribute: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.