Topic: How to append icon to end of input group?
dxl pro asked 5 years ago
The demos show how to place icon at start of input group using prefix. How to do it at the end, like this (for BS4) https://www.codeply.com/go/6ersaA4qLF
This topic is closed.
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
dxl pro commented 5 years agoSo I found that MDBootstrap angular is supposed to support input groups. However, the examples on the sample page looks broken: https://mdbootstrap.com/angular/components/input-groups/ Notice how the prefix and suffix labels do not align with the input. Also not clear if mdbActive would work.
Damian Gemza staff commented 5 years agoHello dxl, What's not working to you? Could you tell me, what behavior of input groups do you expect? Best Regards, Damian
dxl pro commented 5 years agoHi Damian, Please see the link I posted to your site: https://mdbootstrap.com/angular/components/input-groups/ Notice that for Basic Example, the "@" prefix is not vertically aligned with the input. Same for @example.com
Damian Gemza staff commented 5 years agoHi dxl, Please correct me if i'm wrong - Your's problem is only that, this "@" and "example.com" texts in our documentation aren't positioned in center vertically? In my live project it works fine.
dxl pro commented 5 years agoI think the issue is that the top-bottom padding is different between the addon and the input text, so that their texts are not exactly baseline aligned. The addon text is slightly higher. It looked really funny to me at first, but I guess it's not that bad. I'll customize this in my CSS. Thanks!