Метка и текст ввода перекрывают друг друга, когда не в bsModal - PullRequest
Новая
       6

Метка и текст ввода перекрывают друг друга, когда не в bsModal

0 голосов
/ 29 мая 2018

Я использую шаблонную структуру 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>

пример перекрытия

...