CSS не работает в ASP.NET Boilerplate - PullRequest
Новая
       6

CSS не работает в ASP.NET Boilerplate

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

Я пытаюсь реализовать тот же CSS для ввода текста типа, который похож на тот, который мы имеем на странице по умолчанию CreateUser. Поэтому, когда вы нажимаете на текстовое поле «Имя пользователя», под ним отображается синяя линия. То же самое я попробовал на своей странице, она работает нормально, но когда я перехожу на другую страницу и снова захожу на эту страницу, она не показывает синюю линию под текстовым полем.

создать-user.component 

<div bsModal #createUserModal="bs-modal" class="modal fade" (onShown)="onShown()" tabindex="-1" role="dialog" aria-labelledby="createUserModal" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">

        <div #modalContent class="modal-content">

            <form *ngIf="active" #createUserForm="ngForm" id="frm_create_user" novalidate (ngSubmit)="save()">
                <div class="modal-header">
                    <button type="button" class="close" (click)="close()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">
                        <span>{{l("CreateNewUser")}}</span>
                    </h4>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs tab-nav-right" role="tablist">
                        <li role="presentation" class="active"><a href="#user-details" data-toggle="tab">User Details</a></li>
                        <li role="presentation"><a href="#user-roles" data-toggle="tab">User Roles</a></li>
                    </ul>
                    <div class="tab-content">
                        <div role="tabpanel" class="tab-pane animated fadeIn active" id="user-details">

                            <div class="row clearfix" style="margin-top:10px;">
                                <div class="col-sm-12">
                                    <div class="form-group form-float">
                                        <div class="form-line">
                                            <input id="username" type="text" name="UserName" [(ngModel)]="user.userName" required maxlength="32" minlength="2" class="validate form-control">
                                            <label for="username" class="form-label">{{l("UserName")}}</label>
                                        </div>
                                    </div>
                                </div>
                            </div>

mypage.html 

<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="row" style="background-color:white;">
                <div class="header">
                    <h2>
                        {{l('MyPage: ADD/EDIT')}}
                    </h2>
                </div>
                <br />
                <form *ngIf="active" #myForm="ngForm" id="frm_create_store" novalidate (ngSubmit)="onSubmitBtnClick(myForm)">
                    <div class="col-md-12">
                        <div class="form-group form-float">
                            <label for="myName" class="form-label">{{l("myName")}}</label>
                            <div class="form-line">
                                <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
                            </div>
                        </div>
                    </div>

1 Ответ

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

Я думаю, вам нужно пометить с помощью form = "myName" внутри div, который имеет class = "form-line".

Вместо; 

<label for="myName" class="form-label">{{l("myName")}}</label>
<div class="form-line">
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>

Попробуйте это; 

<div class="form-line">
    <label for="myName" class="form-label">{{l("myName")}}</label>
    <input id="myName" type="text" name="myName" [(ngModel)]="name.myName" placeholder="{{l('EnterNAME')}}" required maxlength="32" class="validate form-control">
</div>
...