Verhindert Zeilensprung, wenn die Nachricht angezeigt wird?

Question

Ich habe wenige Elemente auf dem Bildschirm, wo Benutzer nach Datensätzen suchen können. Nachdem sie den Text eingegeben und auf die Schaltfläche geklickt haben, sollte neben der Suchschaltfläche eine Nachricht angezeigt werden. Mein Code funktioniert gut, aber meine Nachricht springt und betrifft die gesamte Zeile. Alle Elemente bewegen sich nach unten, sobald die Nachricht erscheint und wenn die Nachricht verschwindet, geht alles wie gewohnt zurück. Ich frage mich, wie ich verhindern kann, dass Elemente springen, wenn die Nachricht auf dem Geröll erscheint? Ich benutze div Elemente, aber sie werden als Tabellenzeilen und Zellen angezeigt. Ich benutze dies, weil dieser Code innerhalb des Formulars ist und die Verwendung der Tabelle in diesem Fall kein gültiges HTML-Format/Struktur ist. Hier ist Beispiel meines Code:

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

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

Arbeitsbeispiel: https://jsfiddle.net/dmilos89/xeLj00kg/

Answer 1

Höhe, wenn es scheint, verschieben sich die Dinge ein wenig. Ein Fix wäre es, zunächst frCell eine feste Höhe zu geben, um die neue Fehlermeldung aufzunehmen. Ein weiterer Fix kann sein, den zusätzlichen Rand von .error zu entfernen, damit sich Ihre Zeile nicht verschiebt, um es zu berücksichtigen, wenn Fehlermeldung angezeigt wird.

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

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

Answer 2

Versuchen Sie, die display: block; Eigenschaft von Ihrer span.info Klasse in der CSS zu entfernen.

Fiddle: https://jsfiddle.net/ncLsfzv3/

Answer 3

Sie margin und padding Herstellung in der gleichen Höhe wie die Zeile entfernen konnte: https://jsfiddle.net/xeLj00kg/2/

Anfangs hat Dies geschieht, weil Ihre Fehlermeldung eine Höhe von mehr als Zeile des

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

Answer 4

Versuchen Sie,

padding: 0px; 
margin: 0; 

zu

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

CSS-Klasse.