Topic: how to design card header dynamically to the width of card and value inside a textfield
Hi,I was developing a login component with card component. I have reduced the width of my card component. But I can not make the header inside dynamically it is stuck on a fix width. Can someone help me out? Furthermore I want the text I am putting inside to have a padding to the left just like the placeholder how do I do that?
here is my draft: https://mdbootstrap.com/snippets/angular/haso58/2634857
Hi.
Try to use the px class. Add px-0 to the main card div and px-3 to the inputs:
<div class="card col-md-8 px-0" id="loginCard">
...
<!-- Username -->
<div class="md-form ">
<input type="text" id="userInput" class="form-control border rounded-1 px-3" placeholder="Username" >
</div>
<!-- Password -->
<div class="md-form">
<input type="password" id="passwordInput" class="form-control border rounded-1 px-3" placeholder="Password">
</div>
...
</div>
Then you can also remove this from css:
input :: placeholder {
/ * Firefox, Chrome, Opera * /
padding-left: 15px;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: Computer
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes