Buttons not aligned after another button is clicked

[TheLazyPig]

Hi!

I have 3 buttons visible


If I click Add button only Add button should be visible.


Then If I click back the Add button it will display all


But after I click it back the other button is not aligned.

function addBank(polno){
 
    var editbtn = document.getElementById("btnEdit");
    var selectbtn = document.getElementById("btnSelect");

    if (document.getElementById("addNewRow").style.display=='none') {
    document.getElementById("addNewRow").style.display = 'table-row'; // set to table-row instead of an empty string

    selectbtn.style.display = "none"; // Hide button
    editbtn.style.display = "none"; // Hide button
    }
    else {
    document.getElementById("addNewRow").style.display = 'none';

    selectbtn.style.display = "block"; // Show button
    editbtn.style.display = "block"; // Show button
    }
}

<a href="javascript:selectBank()" id="btnSelect" title="Select"><img src = "images/SelectBank.png" id="ImgSelect" width="191" height="38" align="right" ></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:updateBank()" id="btnSave" title="Save" style="display:none;"><img src = "images/SaveBank.png" id="ImgSave" width="74" height="38" align="right"></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:editBank()" id="btnEdit" title="Edit" disabled><img src = "images/EditBank.png" id="ImgEdit" width="69" height="38" align="right" ></a>&nbsp;&nbsp;&nbsp;
<a href="javascript:addBank('$!polno')" id="btnAdd" title="New"><img src = "images/AddBank.png" width="69" height="38" align="right" ></a>

What could be the reason why it is not aligned?

Thank you for the replies!

 

[feherke]

Hi

Probably because the elements with id btnEdit and btnSelect are a elements which by default are inline elements. When you toggle their visibility you change their display to block. Try to not do that :

selectbtn.style.display = "inline"; // Show button
editbtn.style.display = "inline"; // Show button

 

[gmmastros]

Feherke,

First, I agree with your assesment of the problem.

It seems to me that there are several ways to solve this problem by setting display to:

1. inline
2. unset
3. (empty string)

Setting the display to inline would only work if the element was set to inline previously. If there was some css (not shown in the original question) that set the display to something else, then I suspect setting it to inline would not necessarily work.

I think (but not 100% sure) that setting the display to unset would revert back to the default display behavior for the element. Again... if there are css rules that used a different display, unset may also not work as expected.

Lastly... if you set the display to empty string ( selectbtn.style.display = "" ) then I think whatever css styling existed, would then get used.

I ask because I respect your opinion and I am not 100% certain about the information I put into this post.