Question

屏幕上的元素很少，用户可以搜索记录。在他们输入文本并单击按钮后，他们应该会在搜索按钮旁边看到一条消息。我的代码工作正常，但我的消息跳转，影响整行。一旦消息显示，所有元素都会向下移动，当消息消失时，一切都会像往常一样回归我想知道如何在屏幕上显示消息时阻止元素跳转？我使用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>

工作示例：https://jsfiddle.net/dmilos89/xeLj00kg/

Answer 1

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

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

Answer 2

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

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

Answer 3

这种情况正在发生，因为您的错误消息的高度大于行的初始高度，因此当它出现时会发生一些变化。修复方法是最初为frCell提供固定高度以容纳新的错误消息。另一个修复方法是从.error中移除额外的边距，以便在出现错误消息时，您的行不会转移以适应它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

尝试添加

padding: 0px;
margin: 0;

到

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

css class。

显示消息时防止行跳？

4 个答案: