Topic: how to design card header dynamically to the width of card and value inside a textfield

Haso58 free asked 2 years ago


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


Grzegorz Bujański staff answered 2 years ago


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;
}

Haso58 free commented 2 years ago

Sorry for the late reply, thanks it worked



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: Computer
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: Yes