Topic: How to properly left-align input elements with and without icons?
I am using MDBInput with and without icons and would like the input fields being left aligned. In other words, the MDBInput elements without icons need a margin left to cover the space.
<MDBInput label="First Name" group type="text" icon="user" />
<MDBInput label="Last Name" group type="text" />
I want to have the second field indented, so that it starts at the same position as the first field.
I managed this by a custom CSS class that adds 40px margin to the left.
Jakub Chmura staff premium commented 5 years ago
Hi @lauff,
Your solution is correct and this is the only way for input without an icon to start in the same place as input with an icon. You can also add bootstrap classes to align inputs:
In outline styles: ml-3 pl-3, for example:
In material styles: ml-4 pl-3, for example:
Best, Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.26.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Jakub Chmura staff premium commented 5 years ago
Hi @lauff,
I've tested right now inputs and for me, it works well.
Inputs are aligning to the left. Please take a look at this:
Please give me more details about what you want to achieve.
Best, Kuba
lauff pro premium priority commented 5 years ago
I want to have the second field indented, so that it starts at the same position as the first field.
I managed this by a custom CSS class that adds 40px margin to the left.