mdb-input icons in center

Topic: mdb-input icons in center

Petr Urban priority asked 6 years ago

Hi,

I've just simply copied your example:

<form>
    <p class="h4 text-center mb-4">Sign in</p>
    <div class="grey-text">
        <mdb-input label="Your email" icon="envelope" type="email"/>
        <mdb-input label="Your password" icon="lock" type="password"/>
    </div>
    <div class="text-center">
        <mdb-btn>Login</mdb-btn>
    </div>
</form>

Any help, please?

Add comment

Marta Wierzbicka staff answered 6 years ago

1 0 Best answer

Hi,

add the .text-left class to this code:

<div class="grey-text text-left">
<mdb-input label="Your email" icon="envelope" type="email"/>
<mdb-input label="Your password" icon="lock" type="password"/>
</div>

Best,

Marta

Petr Urban priority commented 6 years ago

Thank you Marta, that does the trick :) thanks

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

Hi,

would you tell me more details about the issue? What exactly you want to achieve?

Best,

Marta

Petr Urban priority commented 6 years ago

Hi,

I want the icon to be prepend to the input element but currently the icon is centered in the mdb-input field. I tried in safari and the same result in chrome.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Vue
MDB Version: 4.8.2
Device: MacBook Pro
Browser: Safari
OS: Mac OS
Provided sample code: Yes
Provided link: No

Petr Urban

54Support score
18Questions 1Answers 1Snippets