スタイリング。長いエラーメッセージの吹き出しとしてのフィールド検証エラー。

Question

フィールドバリデーションエラークラスのスタイルを設定しようとしています。コールアウトバブルのように機能します。エラーメッセージが小さい場合は正常に動作しますが、エラーメッセージが長くなるとスタイルが失われます。私はサンプルコードで説明しようとしました。

ご協力いただければ幸いです。

.field-validation-error { 
 
    background: #e99595 url("images/popoutcross.png") 5px center no-repeat; 
 
    position: relative; 
 
    padding: 8px 8px 8px 35px; 
 
    border-radius: 5px; 
 
    box-shadow: 0px 0px 10px #CCC; 
 
    min-height: 20px; 
 
    margin-top: -15px; 
 
    margin-bottom: 15px; 
 
    -moz-border-radius: 6px; 
 
    -webkit-border-radius: 6px; 
 
    display: block; 
 
    max-width: 325px; /* optionally, set a max-width */ 
 
    color: #b94a48; 
 
} 
 

 
    .field-validation-error::before { 
 
     content: ""; 
 
     width: 0px; 
 
     height: 0px; 
 
     border: 0.8em solid transparent; 
 
     position: absolute; 
 
     left: 5%; 
 
     bottom: 35px; 
 
     border-bottom: 10px solid #e99595; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="input-group" style="margin-bottom: 25px;"> 
 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
    <input name="UserName" class="form-control input-validation-error" id="login-username" type="text" placeholder="User Name" value="" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" data-val-length="The field User Name must be a string with a maximum length of 20." 
 
    data-val="true" data-placement="top"> 
 

 
    
 
</div> 
 

 
<span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The User Name field is required.</span></span> 
 

 
<div class="input-group" style="margin-bottom: 25px;"> 
 
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
<input name="UserName1" class="form-control input-validation-error" id="login-username1" type="text" placeholder="User Name1" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" 
 
data-val-length="The field User Name must be a string with a maximum length of 20." data-val="true" data-placement="top"> 
 

 
</div> 
 
<span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName1"><span for="login-username1">The field User Name must be a string with a maximum length of 20.</span></span>

Answer 1

これはあなたの問題を修正するかどうかを確認してください：

<div class="input-group" style="margin-bottom: 25px;"> 
    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
    <input name="UserName" class="form-control input-validation-error" id="login-username" type="text" placeholder="User Name" value="" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" data-val-length="The field User Name must be a string with a maximum length of 20." 
    data-val="true" data-placement="top"> 
    <span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The User Name field is required.</span></span> 
</div> 


<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
<input name="UserName1" class="form-control input-validation-error" id="login-username1" type="text" placeholder="User Name1" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa" data-toggle="popover" data-val-required="The User Name field is required." data-val-length-max="20" 
    data-val-length="The field User Name must be a string with a maximum length of 20." data-val="true" data-placement="top"> 

<span class="text-danger field-validation-error" data-valmsg-replace="true" data-valmsg-for="UserName"><span for="login-username">The field User Name must be a string with a maximum length of 20.</span></span> 
</div> 

完全なコードをここに：http://codepen.io/anon/pen/BKZqYr

ベスト<span>が<div>内部に注入することです。それ以外の場合は、コンテナの高さを計算し、絶対数を正確な数値フォームの先頭に配置することは複雑になります。