페이지에서 공간을 차지하는 jquery를 사용하여 요소 숨기기

Question

jquery를 사용하여 서버 컨트롤 (예 : 텍스트 상자 및 드롭 다운 목록)의 표시 및 숨기기를 수행하고 있습니다.

표시 및 숨기기가 잘 작동하지만 숨겨진 요소가 페이지의 빈 공간을 차지합니다.

I() 함수 JQuery와 숨기기를 사용한 후 요소를 숨기기 위해 트릭을 다음 시도했다 :

CSS ('가시', '숨겨진')

CSS ('디스플레이', ' 여전히 this Question

그러나 같은 문제에 정의 된대로 없음 ')

. 여기

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

표시 시도 후 : 없음을

같은 그 모양 :

어떻게 해결할 수 있습니까? 당신의 도움이

Answer 1

문제는 컨트롤 사이에 줄 바꿈 (<br/>)의 존재가 될 것으로 보인다. newLine 클래스는 각 요소에 적용되는

.newLine 
{ 
    display: block; 
} 

: :이 show 및 hide의 jQuery 기능은 다음 사용할 수 있습니다

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

당신은 당신이 block 디스플레이 모드를 설정하는 클래스 스타일로 대체 할 수 있습니다 컨트롤 사이에 여분의 공간을 남기지 않습니다 :

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

Answer 2

에 대한

덕분에 당신은 시도 할 수 :

는

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