Angular MDB Bootstrap autocomplete label not positioned righ

Topic: Angular MDB Bootstrap autocomplete label not positioned right when bound to object

rctoone pro asked 6 years ago

So here is my code for mdb's autocomplete. <div class="md-form form-sm"> <mdb-completer [label]="'Month'"name="month" [(ngModel)]="productData.releaseDate [datasource]="months" [minSearchLength]="0"></mdb-completer> </div> The label isn't moving up and out of the way like it does on the other input fields when it is prefilled in by the ngModel directive. Is there a way to specify that the label should be minimized?

rctoone pro commented 6 years ago

I have created a google doc that shows the issue more visually if this helps: https://docs.google.com/document/d/1q410eXiJC-PhyISZJKKEPGp5J2lNpUVZKT434wuHz1k/edit?usp=sharing

Add comment

Witold Tkaczyk free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, I couldn't reproduce the issue but I think I know how to fix it. Just simply add [ngClass]="{ 'active': productData.releaseDate}" to your mdb-completer so it should look like this:

<div class=”md-form form-sm”>
    <mdb-completer 
        [label]=”‘Month'”name=”month” 
        [ngClass]="{ 'active': productData.releaseDate}"  
        [(ngModel)]=”productData.releaseDate"  
        [datasource]=”months” 
        [minSearchLength]=”0″>
    </mdb-completer>
 </div>

I hope it helps Regards

rctoone pro commented 6 years ago

thanks, By adding the class active it is now working properly

Add comment

Witold Tkaczyk free answered 6 years ago

0 0 Best answer

Hello, could you send me your .ts and .html files so that I can reproduce the issue? It looks like id is duplicated or active class is missing. Regards

rctoone pro commented 6 years ago

Not sure where to send them too so here is a link to get to them. https://drive.google.com/open?id=0B8XfMmUFRKpIT0tmZ1l6VF96b2M

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

rctoone

Pro User 0Support score
7Questions 0Answers 0Snippets