angular - 标签和输入文本在不在 bsModal 中时相互重叠
问题描述
我正在使用 asp.net 样板 Angular 框架,我正在尝试使用用户添加弹出窗口中的标签/文本字段,即:
<div class="form-group form-float">
<div class="form-line">
<input id="editevent-name" class="form-control" type="text" name="Name" [(ngModel)]="event.name" required maxlength="64" minlength="1" class="validate form-control">
<label for="editevent-name" class="form-label">{{l("Name")}}</label>
</div>
</div>
似乎在 bsModal 中使用它时效果很好,但是在页面中使用时,标签不会在编辑文本上方移动,请参见附加图像。例如:
<div class="row clearfix" [@routerTransition]>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card main-content">
<div class="header">
<h2>
{{event.name}} <span class="event-detail-header"><i class="fa fa-calendar"></i> </span>
</h2>
<ul class="header-dropdown m-r--5">
<li>
<!--<div class="btn-group" role="group">-->
<!--<button type="button" [routerLink]="['/app/events']" class="btn bg-black waves-effect waves-light"><i class="fa fa-arrow-circle-left"></i> {{l('BackToEvents')}}</button> -->
<button [disabled]="saving" type="button" class="btn btn-default waves-effect" (click)="backToPreviousPage()">
{{l("Cancel")}}
</button>
</li>
<li>
<button [disabled]="saving" type="submit" class="btn btn-primary waves-effect" (click)="save()">
{{l("Save")}}
</button>
<!--</div>-->
</li>
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class="waves-effect" (click)="refresh();"><i class="material-icons">refresh</i> {{l('Refresh')}}</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">
<div class="form-group form-float">
<div class="form-line">
<input id="editevent-name" class="form-control" type="text" name="Name" [(ngModel)]="event.name" required maxlength="64" minlength="1" class="validate form-control">
<label for="editevent-name" class="form-label">{{l("Name")}}</label>
</div>
</div>
<div class="form-group form-float">
<div class="form-line">
<textarea id="editevent-description" name="Description" [(ngModel)]="event.description" class="validate form-control"></textarea>
<label for="editevent-description" class="form-label">{{l("Description")}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
解决方案
推荐阅读
- ansible - 获取正确的 powercli 的结果到 Ansible 寄存器
- ruby-on-rails - N+1 查询 - 项目符号删除包括
- c# - ASP.NET MVC — 对控制器的调用按顺序执行,而不是并行执行
- node.js - 通过保持纵横比nodejs将图像调整为精确大小
- c# - 在 C# 中使用数据链接属性时连接到数据源的适当方式
- numpy - 如何向量化以下python代码
- python - 尝试在 python 版本 3.6.4 中安装 sklearn lib 时出错
- java - 导入 spring-aspects 后,找不到某些控制器
- python - 理解字典和字典结构
- java - Jackson:嵌套对象映射实现