Topic: mdb-completer label not positioned correctly when bound to object

Jared Bratu pro asked 6 years ago


My question is identical to Angular MDB Bootstrap autocomplete label not positioned right when bound to object but the proposed solution of adding the ngClass active class didn't work for me. My mdb-completer control looks like:
<mdb-completer [label]="'Vehicle Make'" name="Make" id="Make" #Make="ngModel"
 (focusout)="controlLostFocus($event)" validateVehicleMake
 [(ngModel)]="vehicle.VehicleDetail.VehicleMake"
 [initialValue]=""
 [datasource]="vehicle_make_disp"
 [ngClass]="{ 'active': vehicle.VehicleDetail.VehicleMake }"
 [minSearchLength]="0">
 </mdb-completer>
 <p *ngIf="Make.invalid" class="tags-inline-error">Invalid vehicle make</p>
When vehicle.VehicleDetail.VehicleMake is loaded the label text is over the control value displayed. When I click on the control the label moves up to the correct position.  How can I get the label to appear in the correct position without clicking the control?

Dawid Adach pro answered 6 years ago


Dear Jared Bratu,

You can apply a conditional class to label depending on variable value i.e.:

<label [class.active]="customer.name"for="name"class="active">Ad / Soyad veya Şirket Adı</label>

shampton3@gmail.com pro commented 5 years ago

Sounds like this is a workaround. Are there any plans for the mdb-completer label to behave like the other Reactive Form controls? If I the control with an initial value, via a bound formControlName, I would expect for the label to move above the text area.

Damian Gemza staff commented 5 years ago

Dear shampton3@gmail.com, Which behavior exactly are you expecting? To lift-up label when prefilling with some data in Completer?


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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags