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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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