1

I want to display a text and two buttons inside a <div> in a <aura:component>. When I use the following code:

<div style="background-color:blue; margin:2px; padding:10px;" >
   <span>Page 1 of 0 </span> <span><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>

I got the result like this: enter image description here

But, I want the buttons to align right. So I changed the code to this:

<div style="background-color:blue; margin:2px; padding:10px;" >
   <span>Page 1 of 0 </span> <span style="float: right;"><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>

But, the result I got is like this: enter image description here

When the buttons are aligned right, they are not in vertical center of the <div>. I have used salesforce's slds-float_right class and also used vertical-align: middle. But, everything gives the same result. So, how can I align these buttons to right while keeping them in the vertical center of the <div> ?

1 Answer 1

1

Since you used float on the button so they are taken out from the "normal" flow you can set overflow to "hidden" or "auto" in this case like this

  <div style="background-color:blue; margin:2px; padding:10px;overflow: auto;" >
   <span>Page 1 of 0 </span> <span style="float: right;"><lightning:button label="Prev" disabled="{!v.staywellPrevDisabled}" onclick="{!c.staywellPrev}"/><lightning:button label="Next" disabled="{!v.staywellNextDisabled}" onclick="{!c.staywellNext}"/></span>
</div>
1
  • thanks.. it worked. Apr 23, 2020 at 9:14

You must log in to answer this question.

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