3

I have a lightning button in my custom component. Now the button size is dynamically changing depending on the button text. Is there any way to make it constant?

2 Answers 2

8

If you use lightning:layout, you can expand the button to use slds-size_full to take up the entire containing grid.


Example:

<lightning:layout>
    <lightning:layoutItem size="2">
        <lightning:button class="slds-size_full" name="test1" label="Test 1" />
    </lightning:layoutItem>
    <lightning:layoutItem size="4">
        <lightning:button class="slds-size_full" name="test2" label="Test 2" />
    </lightning:layoutItem>
    <lightning:layoutItem size="6">
        <lightning:button class="slds-size_full" name="test3" label="Test 3" />
    </lightning:layoutItem>
</lightning:layout>

Output:

enter image description here

5

Yes, by setting a width to your element, for example:

component.cmp

<lightning:button class="myBtn" variant="brand" label="Submit" onclick="{! c.handleClick }"/>
<lightning:button class="myBtn" variant="brand" label="Longer Submit" onclick="{! c.handleClick }" />
<lightning:button class="myBtn" variant="brand" label="Very long Submit" onclick="{! c.handleClick }" />

Style.css

    .THIS.myBtn  {
        width: 10px;
    }

the above code snippet will set a width of 10 pixels to each button, however, it is not very practical, so you might want to set your own custom width, maybe height and other css attributes for the letters...

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .