Topic: How to append icon to end of input group?
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
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Closed
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags
dxl pro commented 6 years ago
So 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 6 years ago
Hello dxl, What's not working to you? Could you tell me, what behavior of input groups do you expect? Best Regards, Damiandxl pro commented 6 years ago
Hi 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.comDamian Gemza staff commented 6 years ago
Hi 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 6 years ago
I 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!