使用jQuery隐藏元素占用页面空间 [英] Hiding elements using jquery taking up space on page

问题描述

我正在显示和隐藏服务器控件，即使用jquery的Textboxe和DropDownList.

I am doing show and hide of server controls i.e 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 .

在尝试使用jquery hide()函数后，我尝试了以下技巧来隐藏元素:

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

css('visibility'，'hidden')

css('display'，'none')

在此问题中定义

但是仍然是同样的问题.

But still the same problem .

这是我的代码:

 <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>

这是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>

尝试显示后:无

它看起来像:

我该如何解决?

感谢您的帮助

推荐答案

问题似乎出在控件之间存在换行符(<br/>).您可以通过将显示模式设置为block的类样式替换它们:

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;
}

newLine类应用于每个元素:

<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>

然后可以使用show和hide jQuery函数，并且不会在控件之间留下多余的空间:

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')
    }
});

这篇关于使用jQuery隐藏元素占用页面空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！