CODEWITHSUNDEEP
jquerycss
Dev Try
Dev Try

Reputation: 211

Issue in showing buttons

Here is a div which has a span and a button. The span contains a checkbox and its text. 

<div style="margin-top:10px;" id="dvCopysave">
    <span id="spancopy">
        <input type="checkbox" id="DynamicCopy" class="checkall" style="font-size: medium;border-width:medium;margin-left:375px" onclick="DynamicCopy_Onclick()" />
        <b> Copy data to other panels </b> &nbsp; &nbsp;
    </span>
    <button id="DynamicAdd" type="button" onclick="DynamicSave_Onclick()">
        Save
    </button>
</div>

In doucment.ready, there is a condition check and manage the visibility:

if (@Model.Target == 2)//Inspection details ->questions
{
    var panels='@Model.srPanelList';
    var lst=panels.split('|');

    $("#id").css("display", "none");

    if(lst.length-1>1)
    {
        document.getElementById("spancopy").style.visibility='visible';              
    }
    else
    {
        document.getElementById("spancopy").style.visibility='hidden';               
    }
}

Everything is working fine, but when the spancopy is not visible, the position of save button is not changing, it is still the same. So look and feel has small issue.....

Upvotes: 0

Views: 65

Answers (2)

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

that's because of ...style.visibility='hidden'. visibility:hidden means the element is not seen on the page, but space is allocated hence takes the space. So instead of visibility, you need to use display, like:

...
if(lst.length-1>1)
{
    document.getElementById("spancopy").style.display='block';              
}
else
{
    document.getElementById("spancopy").style.display='none';               
}
...

display:none makes the element disappear with no space allocated to it.

Upvotes: 4

31piy
31piy

Reputation: 23859

Setting visibility doesn't affect the box area occupied by the element. If you want to remove the area occupied as well, set display property of that element to none.

Upvotes: 2

Related Questions