Menu
I have few elements on the screen where user can search for records. After they enter the text and click on the button they should see a message next to the search button. My code works fine but my message jumps and that affects entire row. All elements move down once message shows and when message disappears everything goes back as usual. I'm wondering how I can prevent elements to jump when message show on the scree? I use div elements but they are displayed as table rows and cells. I use this because this code is inside of the form and using table in this case is not valid HTML format/structure. Here is example of my code:
$('#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>Working example: https://jsfiddle.net/dmilos89/xeLj00kg/
460
Using skeleton screens is one approach to prevent this. If you know the width and height you want to display for the image you're loading, this is pretty easy to implement by setting the width and height in the CSS, along with a background color.
If you want to prevent the text from wrapping, you can apply white-space: nowrap; Notice in HTML code example at the top of this article, there are actually two line breaks, one before the line of text and one after, which allow the text to be on its own line (in the code).
If you want to limit the text length to one line, you can clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.
This is happening because your error message has a height greater than row's initial height, so when it appears things shift a little. A fix would be to give a fixed height to frCell initially to accommodated the new error message. Another fix can be to remove the extra margin from .error so your row won't shift to accommodate for it when error message show.
$('#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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
