mdb-select-2 with prefix icon


Topic: mdb-select-2 with prefix icon

alex737876 pro premium asked a year ago

*_Expected behavior_*If i add icon exact same way as others to mdb-select-2, it should show the prefix icon correctly before the control.

*_Actual behavior_*With mdb-select-2 control, the prefix icon is inside mdb-select-2.

*_Resources (screenshots, code snippets etc.)_*Got icon prefix from: https://mdbootstrap.com/docs/angular/forms/inputs/#icon-prefixes

Works for all other inputs except mdb-select-2:

    <div class="md-form md-outline">
       <mdb-icon fas icon="phone-alt" class="prefix"></mdb-icon>
       <mdb-select-2 [outline]="true" label="Example label" formControlName="select2" >
           <mdb-select-option *ngFor="let option of options" [value]="option.value">{{ option.label }}</mdb-select-option>
       </mdb-select-2>
    </div>

Thank you for reporting this problem, we will take a closer look at that. As a workaround for now, please try to add these rules to the global styles in styles.scss file:

.md-form.md-outline .prefix ~ mdb-select-2 {
  margin-left: 2rem;
  width: calc(100% - 2rem);
}

.md-form.md-outline .prefix ~ mdb-select-2 .mdb-select-label {
  margin-left: 2rem;
}

alex737876 pro premium commented a year ago

Thank you very much!


alex737876 pro premium commented a year ago

@Arkadiusz Idzikowski one thing left, small issue with padding/margin i guess: Applying the fix style makes the icon vertically stick to the top. Icons of other inputs (which do not need the fix) are centered. Can you help me on this?


Arkadiusz Idzikowski staff commented a year ago

@alex737876 I double-checked that and it looks like the icon with the fixed styles has the same top: 0.25rem style as other icons and it is positioned in the center. Do you use the code that you added to the first post?


alex737876 pro premium commented a year ago

@Arkadiusz Idzikowski You are awesome. Double-checked it and found i was using "" instead of . Now it works, thanks


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB4 11.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes