Ngăn chặn hàng nhảy khi thông báo được hiển thị?

Question

Tôi có một vài yếu tố trên màn hình nơi người dùng có thể tìm kiếm các bản ghi. Sau khi họ nhập văn bản và nhấp vào nút họ sẽ thấy một thông báo bên cạnh nút tìm kiếm. Mã của tôi hoạt động tốt nhưng thông điệp của tôi nhảy và ảnh hưởng đến toàn bộ hàng. Tất cả các yếu tố di chuyển xuống một lần hiển thị tin nhắn và khi thông báo biến mất mọi thứ trở lại như bình thường. Tôi tự hỏi làm thế nào tôi có thể ngăn chặn các yếu tố để nhảy khi tin nhắn hiển thị trên scree? Tôi sử dụng các phần tử div nhưng chúng được hiển thị dưới dạng hàng và ô của bảng. Tôi sử dụng điều này vì mã này nằm bên trong biểu mẫu và sử dụng bảng trong trường hợp này không phải là định dạng/cấu trúc HTML hợp lệ. Dưới đây là ví dụ về mã của tôi:

$('#searchBtn').on('click', function(){ 
 
\t $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t \t  $(this).removeClass("error").dequeue(); 
 
\t \t \t }); 
 
});

div.formTbl { 
 
\t display: table; 
 
\t width: 100%; 
 
} 
 
div.frRow { 
 
\t display: table-row; 
 
\t text-align: left; 
 
} 
 
div.frCell { 
 
\t display: table-cell; 
 
\t padding-top: 2px; 
 
\t padding-bottom: 2px; 
 
\t padding-left: 0px; 
 
\t padding-right: 0px; 
 
\t text-align: center; 
 
} 
 
span.info, .success, .warning, .error { 
 
\t border: 1px solid; 
 
\t margin: 5px; 
 
\t padding:5px 10px 5px 40px; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t border-radius: 3px; 
 
\t display: block; 
 
} 
 
span.error { 
 
\t color: #D8000C; 
 
\t background-color: #FFBABA; 
 
\t background-image: url('../Images/error.png'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="formTbl" style="width:650px;"> 
 
    <div class="frRow"> 
 
    <div class="frCell" style="width:85px;"> 
 
     <select name="studMenu" id="studMenu"> 
 
     <option value="1">Name</option> 
 
     <option value="3">DOB</option> 
 
     <option value="4">Gender</option> 
 
     <option value="5">Nationality</option> 
 
     </select> 
 
    </div> 
 
    <div class="frCell" style="width:175px;"> 
 
     <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /> 
 
    </div> 
 
    <div class="frCell" style="width:80px;"> 
 
     <input type="button" name="searchBtn" id="searchBtn" value="Search"/> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span id="searchMsg" style="display:none;"></span> 
 
    </div> 
 
    </div> 
 
</div>

dụ làm việc: https://jsfiddle.net/dmilos89/xeLj00kg/

Answer 1

này đang xảy ra vì thông báo lỗi của bạn có chiều cao lớn hơn của hàng ban đầu chiều cao, vì vậy khi nó xuất hiện những thứ thay đổi một chút. Bản sửa lỗi sẽ cung cấp chiều cao cố định cho frCell ban đầu để cung cấp thông báo lỗi mới. Một sửa chữa khác có thể là để loại bỏ số dư thừa từ .error để hàng của bạn sẽ không thay đổi để phù hợp với nó khi thông báo lỗi hiển thị.

$('#searchBtn').on('click', function(){ 
 
\t $('#searchMsg').addClass("error").show().text('This field is required.').delay(4000).fadeOut('slow').queue(function(){ 
 
\t \t \t  $(this).removeClass("error").dequeue(); 
 
\t \t \t }); 
 
});

div.formTbl { 
 
\t display: table; 
 
\t width: 100%; 
 
} 
 
div.frRow { 
 
\t display: table-row; 
 
\t text-align: left; 
 
} 
 
div.frCell { 
 
\t display: table-cell; 
 
\t padding-top: 2px; 
 
\t padding-bottom: 2px; 
 
\t padding-left: 0px; 
 
\t padding-right: 0px; 
 
\t text-align: center; 
 
} 
 
span.info, .success, .warning, .error { 
 
\t border: 1px solid; 
 
\t padding:5px 10px 5px 40px; 
 
\t background-repeat: no-repeat; 
 
\t background-position: 10px center; 
 
\t border-radius: 3px; 
 
\t display: block; 
 
} 
 
span.error { 
 
\t color: #D8000C; 
 
\t background-color: #FFBABA; 
 
\t background-image: url('../Images/error.png'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="formTbl" style="width:650px;"> 
 
    <div class="frRow"> 
 
    <div class="frCell" style="width:85px;"> 
 
     <select name="studMenu" id="studMenu"> 
 
     <option value="1">Name</option> 
 
     <option value="3">DOB</option> 
 
     <option value="4">Gender</option> 
 
     <option value="5">Nationality</option> 
 
     </select> 
 
    </div> 
 
    <div class="frCell" style="width:175px;"> 
 
     <input type="text" name="searchFld" id="searchFld" size="24" maxlength="24" value="" title="Maximum size of the field is 24 characters." placeholder="Example: John, Miller" /> 
 
    </div> 
 
    <div class="frCell" style="width:80px;"> 
 
     <input type="button" name="searchBtn" id="searchBtn" value="Search"/> 
 
    </div> 
 
    <div class="frCell"> 
 
     <span id="searchMsg" style="display:none;"></span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Hãy thử loại bỏ các display: block; tài sản từ lớp span.info của bạn trong CSS.

Fiddle: https://jsfiddle.net/ncLsfzv3/

Answer 3

bạn có thể loại bỏ các margin và padding làm trong cùng một chiều cao như hàng: https://jsfiddle.net/xeLj00kg/2/

span.error { 
    color: #D8000C; 
    background-color: #FFBABA; 
    background-image: url('../Images/error.png'); 
    padding: 0; 
    margin: 0; 
} 

Answer 4

thử thêm

padding: 0px; 
margin: 0; 

để

span.error { 
padding: 0px; 
margin: 0; 
} 

lớp css.