使用jQuery隐藏元素占用页面空间

Question

I am doing show and hide of server controls ie Textboxe and DropDownList using jquery.

Show and hide is working fine but the element which is hidden is taking up its blank space on the page .

I've tried following tricks to hide the elements after using jquery hide() function:

css('visibility', 'hidden')

css('display', 'none')

as defined in this Question

But still the same problem .

Here is my code:

 <script>
    $(document).on("click", ".edit", function () {
    var col_name= $(this).data('col_name');
    var tbl_name = $(this).data('tbl_name');
    var tr = $(this).parent().parent();
    var tdRecords = $(tr).children();
    var CurrValue = $(tdRecords[0]).text();
    $('#<%= txt_Curr_Val.ClientID %>').val(CurrValue);
    $('#<%=txt_colname.ClientID%>').val(col_name);
    $('#<%=txt_tblname.ClientID%>').val(tbl_name);
        if (col_name == 'relig_code')
        {
            $('#<%=ddl_relig.ClientID%>').show('slow');
            //$('#<%=txt_New_Val.ClientID%>').hide('slow');
            $('#<%=txt_New_Val.ClientID%>').css('visibility', 'hidden')
        }
        else
        {
            //$('#<%=ddl_relig.ClientID%>').hide('slow');
            $('#<%=ddl_relig.ClientID%>').css('visibility', 'hidden')
             $('#<%=txt_New_Val.ClientID%>').show('slow')
        }
    });
  </script>

Here is the HTML :

<div class="modal-body">
                      <div class="row">
                          <div class="col-md-3">
                              Current Value :
                          </div>
                          <div class="col-md-8">
                              <asp:TextBox CssClass="txtstyle txtwidth"  runat="server" ID="txt_Curr_Val" TextMode="MultiLine"></asp:TextBox>
                          </div>
                      </div>
                        <div class="row">
                          <div class="col-md-3">
                              New Value :
                          </div>
                          <div class="col-md-8">
                              <asp:TextBox CssClass="txtstyle txtwidth" runat="server" ID="txt_New_Val" TextMode="MultiLine"></asp:TextBox><br />
                              <asp:DropDownList  runat="server" ID="ddl_relig"></asp:DropDownList><br />
                              <asp:TextBox CssClass="txtstyle" runat="server" ID="txt_tblname" ></asp:TextBox><br />
                              <asp:TextBox CssClass="txtstyle" runat="server" ID="txt_colname"></asp:TextBox>
                          </div>
                      </div>

                    </div>

After trying display : none

its look like :

How can I resolve this ?

Thanks for your Help

Answer 1

You could try:

$('#<%=ddl_relig.ClientID%>').css('position', 'absolute')
$('#<%=ddl_relig.ClientID%>').css('left', '-9999px')

Answer 2

The problem seems to be the presence of line breaks ( <br/> ) between the controls. You can replace them by a class style where you set the display mode to block :

.newLine
{
    display: block;
}

The newLine class is applied to each element:

<div class="col-md-8">
    <asp:TextBox CssClass="txtstyle txtwidth newLine" runat="server" ID="txt_New_Val" TextMode="MultiLine" />
    <asp:DropDownList CssClass="newLine" runat="server" ID="ddl_relig" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_tblname" />
    <asp:TextBox CssClass="txtstyle newLine" runat="server" ID="txt_colname" />
</div>

The show and hide jQuery functions can then be used and will not leave an extra space between the controls:

$(document).on("click", ".edit", function () {
    ...
    if (col_name == 'relig_code') {
        $('#<%=ddl_relig.ClientID%>').show('slow');
        $('#<%=txt_New_Val.ClientID%>').hide('slow');
    }
    else {
        $('#<%=ddl_relig.ClientID%>').hide('slow');
        $('#<%=txt_New_Val.ClientID%>').show('slow')
    }
});