Hiding elements using jquery taking up space on page

Question

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 .

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

`display: none` meets your exact requirement. Can you explain why it does not work for you. — Rory McCrossan, Jun 27 '16 at 09:58
@PaulZahra I've already defined in my question that i've tried the answer of the question you pointed — Alina Anjum, Jun 27 '16 at 09:59
There must be some other css that's making it display... in most browsers 'developer mode' look at the css for the element. — Paul Zahra, Jun 27 '16 at 09:59
@RoryMcCrossan display:none is working but the element is taking up its space on the page — Alina Anjum, Jun 27 '16 at 09:59
@AlinaAnjum I can guarantee you that it isn't. If there's a space appearing it's not due to the hidden element. We need to see a working example of your code to help you. — Rory McCrossan, Jun 27 '16 at 10:00
What is occupying the space? Is there some other (empty) element that is causing the space to remain even when the display of the element in set to `none`? — Richard, Jun 27 '16 at 10:01
Retracted close vote... setup a fiddle for us... https://jsfiddle.net — Paul Zahra, Jun 27 '16 at 10:02
@PaulZahra here it is : .txtstyle { line-height:normal !important; } .txtwidth { width:100%; } — Alina Anjum, Jun 28 '16 at 04:27

score 1 · Answer 1 · 2016-06-27T10:10:44.767

1

You could try:

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

edited Jun 27 '16 at 10:10

answered Jun 27 '16 at 09:56

3

`opacity: 0` means the element will still take up space in the DOM. `display: none` is exactly what the OP needs, so there is an underlying issue here. – Rory McCrossan Jun 27 '16 at 10:01

score 0 · Accepted Answer · answered Jun 27 '16 at 20:45

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

thank you so much , it was just a blunder.. Thanks a lot..it worked — Alina Anjum, Jun 28 '16 at 04:31

Hiding elements using jquery taking up space on page

2 Answers2

Linked