Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Floating label doesn't work with routing?

Matt Honeycutt free asked 7 years ago


I'm using the latest free version of MDB Angular.  I have a form that works just fine when I'm *not* using Angular's routing module, but if I take the exact same form, and load it via a route, the floating labels do not work anymore.  Clicking in the field doesn't seem to add the "active" class to the labels anymore. Here's my form: https://gist.github.com/MattHoneycutt/de95292082b4477e0475cad2bd72c48e Any ideas?   This is with MDB Angular 4.3.2.  I can provide a full repo if that will help.

Austin Jensen free commented 7 years ago

I am having the same issue in Angular 5 utilizing the routing module on MDB Angular 4.3.7. I am attempting to use the default example given in the documentation.

Witold Tkaczyk free answered 7 years ago


Hello, make sure that you have mdbActive attribute at your input. if you have and it still doesn't seem to work properly you can try with adding to the related label [ngClass]="{ 'active': username }". This should fix the problem.
<div class="md-form">

  <input [value]="username"type="text"id="form6"class="form-control"mdbActive>

  <label [ngClass]="{ 'active': username }"for="form6">{{username}}</label>

</div>
Hope it helps Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags