消息显示时防止行跳跃？

屏幕上的用户可以搜索记录的元素很少。 在他们输入文本并点击按钮后，他们应该在搜索按钮旁边看到一条消息。 我的代码工作正常，但我的消息跳转，并影响整个行。 一旦消息显示，消息消失后​​，所有元素都会向下移动，所有事情都照常进行。 我想知道如何防止元素在屏幕上显示消息时跳转？ 我使用div元素，但它们显示为表格行和单元格。 我使用这个，因为这个代码是在窗体的内部，在这种情况下使用表是不是有效的HTML格式/结构。 这是我的代码的例子：

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

div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
span.info, .success, .warning, .error {
	border: 1px solid;
	margin: 5px;
	padding:5px 10px 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	background-color: #FFBABA;
	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>

---

发生这种情况是因为你的错误消息的高度大于行的初始高度，所以当它看起来事情发生了一些变化。 解决方法是首先给frCell一个固定的高度以容纳新的错误信息。 另一个解决方法是从.error删除额外的边距，以便在显示错误消息时，您的行不会移动以适应它。

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

div.formTbl {
	display: table;
	width: 100%;
}
div.frRow {
	display: table-row;
	text-align: left;
}
div.frCell {
	display: table-cell;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
span.info, .success, .warning, .error {
	border: 1px solid;
	padding:5px 10px 5px 40px;
	background-repeat: no-repeat;
	background-position: 10px center;
	border-radius: 3px;
	display: block;
}
span.error {
	color: #D8000C;
	background-color: #FFBABA;
	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>

---

尝试删除display: block; 属性来自CSS中的span.info类。

小提琴：https：//jsfiddle.net/ncLsfzv3/

---

您可以删除与行相同高度的边距和填充：https：//jsfiddle.net/xeLj00kg/2/

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

链接地址: http://www.djcxy.com/p/96971.html

上一篇: Prevent row jumping when message displayed?

下一篇: Keep footer at bottom of page when page height dynamically changes using CSS