Mesaj görüntülendiğinde satır atlamalarını engelle?

Question

Ekranda kullanıcının kayıtları arayabileceği birkaç öğe var. Metne girdikten ve düğmeyi tıkladıktan sonra arama düğmesinin yanında bir mesaj görmelidirler. Kodum iyi çalışıyor ama mesajım atlıyor ve bu tüm satırı etkiler. Mesaj gösterildiğinde ve mesaj kaybolduğunda tüm elemanlar aşağı doğru hareket eder, her şey her zamanki gibi geri döner. Scree'de mesaj gösterildiğinde öğelerin nasıl atlayabileceğimi merak ediyorum. Div elemanlarını kullanıyorum ama bunlar tablo satırları ve hücreler olarak görüntülenir. Bunu kullanıyorum çünkü bu kod formun içinde ve bu durumda tablo kullanmak geçerli HTML formatı/yapısı değil.

$('#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>

Çalışma örneği: İşte benim kod örneği https://jsfiddle.net/dmilos89/xeLj00kg/

Answer 1

yükseklik, görününce şeyler biraz değişiyor. Bir düzeltme, başlangıçta yeni hata mesajını barındırmak için frCell'a sabit bir yükseklik vermektir. Diğer bir düzeltme, .error'dan ekstra marjı kaldırmak olabilir, böylece satırınız hata mesajı gösterdiğinde buna uygun olmayacaktır.

$('#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

CSS içinde span.info sınıfından display: block; özelliğini kaldırmayı deneyin.

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

Answer 3

Eğer satır olarak aynı yükseklikte marjı ve dolgu yapma kaldırmak olabilir

: Hata mesajı satır başlangıçtaki büyük bir yükseklik olduğundan bu oluyor https://jsfiddle.net/xeLj00kg/2/

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

Answer 4

deneyin

padding: 0px; 
margin: 0; 

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

için css sınıfını ekledi.