Prevent row jumping when message displayed?

Question

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/

Answer 1

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>