How to set style for complete-holder, input and label

Topic: How to set style for complete-holder, input and label

osoverflow pro asked 7 years ago

I'm using the mdb-completer component, but can't make it work well. The code is this:

<div class="form-row">
  <div class="col-md-6">
    <div class="md-form">
      <i class="fa fa-globe prefix grey-text"></i>
      <mdb-completer mdbActive mdbInputValidate [label]="labels.country" name="country" formControlName="country" [datasource]="countries" [minSearchLength]="0" inputClass="form-control"></mdb-completer>
    </div>
  </div>
</div>

And the problem is that the fa icon is overlapped with the completer. On the mdb-date-picker i used an style to push the field, but on the mdb-completer I can't push it This is the style I'm using

mdb-date-picker {
  border: 0;
  padding-left: 3rem;
}

mdb-completer {
  padding-left: 3rem;
}


.completer-holder {
  border: 1px solid red;
}

And this is an screenshot of the part of the form. https://www.dropbox.com/s/l42ffff1so7s5tb/Screenshot%202018-03-15%2016.18.54.png?dl=0

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Dear osoverflow, For adding fa icons near left / right edge of some input, the best practice to achieve this is using Input Groups. Please try this code:

<div class="md-form input-group">

<mdb-completer [label]="'Select color'" initialValue="Select color" name="autocomplete" [(ngModel)]="searchStr" [datasource]="dataService"

[minSearchLength]="0">

</mdb-completer>

<div class="input-group-append" id="basic-addon2">

<i class="fa fa-globe prefix grey-text"></i>

</div>

</div>

Best Regards, Damian

Add comment

osoverflow pro answered 7 years ago

0 0 Best answer

Ok, it partially works. The icon is now at the left, but the input field is not, and trying to access the style with inputClass don't works Also the label is not working well, when I focus the field it is up, and that is OK, but when I write something, and then blur the field, the label comes down. You can see how it looks in the screenshots Also the clearUnselected is not working. When i write something there that is not in the search options and then blur the field, the text remains https://www.dropbox.com/s/6s0rxm4lbshwsd0/Screenshot%202018-03-16%2014.20.38.png?dl=0 https://www.dropbox.com/s/i602fw48gpb9y0i/Screenshot%202018-03-16%2014.20.55.png?dl=0

<div class="form-row">
 <div class="col-md-6">
 <div class="md-form input-group">
 <div class="input-group-append" id="basic-addon-country">
 <i class="fa fa-globe prefix grey-text"></i>
 </div>
 <mdb-completer mdbActive mdbInputValidate [label]="labels.country" name="country"
 formControlName="country" [datasource]="countries" [clearUnselected]="true" [inputClass]="register-completer"
 [minSearchLength]="0"></mdb-completer>
 </div>
 </div>
 </div>

the component.scss

mdb-completer {
  padding-left: 3rem;
}


.md-form.input-group {
  padding-left: 0;
}

input.register-completer {
  border: 1px solid red;
}

Damian Gemza staff commented 7 years ago

Dear Osoverflow, I've prepared a fix for clearUnselected in completer. Please head into pro/autocomplete/directives/input.directive.ts file, and in 'blur' HostListener, in below line 140 if (this.clearUnselected && !this.completer.hasSelected) please paste this code: this.el.nativeElement.value = ''; Then save changes and try one more time. For me it work. It will be added in next release. Best Regards, Damian

osoverflow pro commented 7 years ago

Ok, the clearUnselected works now. Persist the label

Add comment

Damian Gemza staff answered 7 years ago

0 0 Best answer

Dear Osoverflow, Which version do you use? 5.2.2? For me, I can't see any problems with focus / blur label. For positioning label at the center if you're talking about this, to your mdb-completer styles add this:

label:not(.active) {

top: 1.2rem;

}

And you're right, that there's something wrong with clearUnselected in completer. I'll take a look at this.

Best Regards,

Damian

osoverflow pro commented 7 years ago

The label problem seems to be that it works detecting that the field is focused, but not that the field has content. When it has content the label should be up, and on this case the label don't detect that and stays down.

Add comment

osoverflow pro answered 7 years ago

0 0 Best answer

Here is a video of the problem with the chrome console to show what is happening https://www.dropbox.com/s/wodfxaf2fybf4is/screencast%202018-03-22%2012-58-17.mp4?dl=0 You can see that other fields works, but completer.

Damian Gemza staff commented 7 years ago

Dear Osoverflow, that was a bug. It's fixed right now, and available to download from our GitLab branch dev. Feel free to update your project. Best Regards, Damian

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

About author

osoverflow

Pro User

60Support score
17Questions 8Answers

0Snippets likes 0Snippets