Css ng重复,错误消息对齐
我有一个ng repeat控件,有textbox、textarea和删除图像图标。我正在为textbox、textarea添加一个必需的验证器。显示span错误消息后,对齐将发生扭曲。 以下是使用的代码:Css ng重复,错误消息对齐,css,angularjs-ng-repeat,Css,Angularjs Ng Repeat,我有一个ng repeat控件,有textbox、textarea和删除图像图标。我正在为textbox、textarea添加一个必需的验证器。显示span错误消息后,对齐将发生扭曲。 以下是使用的代码: <div class="row"> <div class="form-group "> <label class="form-group col-md-3">Language&l
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row">
<div>
<div ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
</div>
</div>
语言
标题
描述
{{Descriptions.Language}}
标题是必需的
需要说明
使用ng repeat时,如何正确设置跨度的对齐方式?初始加载控制装置是否正确对齐。如果删除标题或说明中的任何项目,然后单击“提交”,则会显示错误消息,但用户界面会失真
谢谢@haxxxton提供的解决方案就是答案,它是:
您应该将ng repeat向上移动,因为这将提供引导列所需的“clearfix”,以便允许额外跨度的高度变化。ie
引导程序的行
类包括“ing”。这允许不同高度列的行始终从左侧开始。当前,html正在使用行中的嵌套div
作为重复元素。如果将ng repeat
向上移动到行
class div,则ClearFixed将在每组列之后生效,并且外观应与预期一致
更新的HTML
<div class="row">
<div class="form-group ">
<label class="form-group col-md-3">Language</label>
<label class="form-group col-md-4">Title</label>
<label class="form-group col-md-5">Description</label>
</div>
</div>
<div class="row" ng-repeat="Descriptions in testsWithDescription ">
<div class="form-group col-md-2 top-Margin-language">
<label ng-model="Descriptions.Language">{{Descriptions.Language}}</label>
</div>
<div class="form-group col-md-4 top-Margin-Title">
<input type="text" maxlength="150" class="form-control input-md" required="" name="titleValidate_{{$index}}" ng-model="Descriptions.Title" />
<span style="color:red" ng-show="submitted == true && mainForm.titleValidate_{{$index}}.$error.required">Title is required</span>
</div>
<div class="form-group col-md-5">
<textarea maxlength="500" class="form-control input-md noresize" required="" name="descriptionValidate_{{$index}}" noresize="" ng-model="Descriptions.Description"></textarea>
<span style="color:red" ng-show="submitted == true && mainForm.descriptionValidate_{{$index}}.$error.required">Description is required</span>
</div>
<div class="form-group col-md-1">
<a style="cursor:pointer">
<img ng-src="{{DeleteIcon_url}}" alt="delete image" ng-click="($index == !selectedDeleteIcon) || testsWithDescription.splice($index,1)" ng-class="{'disabled': $first}" />
</a>
</div>
</div>
语言
标题
描述
{{Descriptions.Language}}
标题是必需的
需要说明
你能给我们提供一个剪子或小提琴吗,这样我们就可以看到实际发生的情况了?你应该把你的ng repeat
移动到你的
上,因为这将提供引导柱需要的“clearfix”,以便允许额外跨度的高度变化。ie
嗨,我已经提供了屏幕片段。嗨@haxxxton。您的解决方案解决了问题请管理员将此问题设置为已回答,由@haxxxton提供的解决方案已解决此问题。目前我没有得到任何图标来标记问题的答案。我已将该评论标记为有用。