Topic: mdb-select-2 with prefix icon
*_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 premium commented 3 years ago
Thank you very much!
alex737876 premium commented 3 years 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 3 years 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 premium commented 3 years ago
@Arkadiusz Idzikowski You are awesome. Double-checked it and found i was using "" instead of . Now it works, thanks
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Premium
- 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