將 .field-validation-error 樣式化為長錯誤消息的標注

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> 。 否則，計算容器的高度並將其絕對定位為頂部的確切數字會變得很復雜。