CSS not working in ASP.NET Boilerplate

Question

I'm trying to implement the same CSS for an input of type text as similar to the one we have in CreateUser default page. So when you click on User Name textbox it shows a blue line under it. Same I tried on my page it works fine, but when I go to other page and come to this page again, it does not show the blue line under the textbox.

create-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>

Create an example on stackblitz.com, it'll be easier. Or post some more code (css, component if you are using angular animations) — David, May 17 '18 at 08:25
check Inspect element css in chrome to comapre ans see what css classes are present when it is working vs not working — Srinivas GV, May 20 '18 at 16:17
In working case, when I click on textbox .focused class is add. This doesn’t happen when it’s not working. — Vivek Nuna, May 20 '18 at 16:20
What's "come to this page again"? Fork [module-zero-core-template](https://github.com/aspnetboilerplate/module-zero-core-template) with a repro. — aaron, May 22 '18 at 17:42

score 2 · Accepted Answer · answered May 17 '18 at 09:47

I think you need to label with form="myName" inside the div which has class="form-line".

Instead of;

<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>

Try this;

<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>

CSS not working in ASP.NET Boilerplate

1 Answers1