0

I am able to create a commandbutton with image in visualforce page. But how to align it with another button?
This is the current result:

command button with image not aligned with another button

Here is the code

<apex:outputPanel id="top" layout="block" style="margin:5px;padding:10px;padding-top:2px;">          
    <span style="padding-left:5px"><apex:commandButton styleClass="updateBookingButton" id="btnUpdateBooking" value="Update" action="{!updateBookingTask}"></apex:commandButton></span>
    <span style="padding-left:5px"><apex:commandButton styleClass="resetBookingButton" id="btnResetBooking" value="Reset" onclick="if(!confirm('Are you sure?')){return false};" action="{!resetBookingTask}"></apex:commandButton></span>
    <span style="padding-left:5px;"><apex:commandButton styleClass="refreshBookingButton" id="btnRefreshBooking" value="Refresh" action="{!refreshBookingTask}"  image="{!URLFOR($Resource.refresh_icon)}" style="width: 15px; height: 13px;"></apex:commandButton></span>
</apex:outputPanel>

I also tried to add margin and display it with inline-block but the button still not aligned with other button. Basically, I want to align the refresh button with other button

Am I missing something?

0

Try adding vertical-align:bottom; to your CSS.

<span style="padding-left:5px;"><apex:commandButton styleClass="refreshBookingButton" id="btnRefreshBooking" value="Refresh" action="{!refreshBookingTask}"  image="{!URLFOR($Resource.refresh_icon)}" style="width: 15px; height: 13px;vertical-align:bottom;"></apex:commandButton></span>

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.