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