Topic: border not visible plus label overlapping

surajgautam free asked 2 years ago

*Expected behavior*I am creating a small form UI using mdbootstrap as per the examples from the docs. There should be no overlap between label and input field plus there should be a border.

*Actual behavior*The Label is being overlapped with the input element. Also, the border in the input element is not visible.

EDIT: I was asked to have a look into Updating label width or Dynamic input initialization. I installed MDB in my project using ng add. I don't have styles in angular.json but in styles.scss. Also, what corresponds to mdb in new mdb.Input(formOutline).update(); ??

Resources (screenshots, code snippets etc.)

No Border

enter image description hereExample Code that I am looking into: code as a reference.


enter image description here


<section class="vh-100" style="background-color: #E4F3EB;">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
  <div class="col-12 col-md-8 col-lg-6 col-xl-5">
    <div class="card shadow-2-strong" style="border-radius: 1rem;">
      <div [formGroup]="signupForm" class="card-body p-5 text-center">
        <span><img src="favicon.png" width="15%" height="15%"/><h3 class="mb-5">Signup</h3></span>

        <div class="form-outline mb-4">
          <input type="email" id="typeEmailX-2" class="form-control form-control-lg" formControlName="email"/>
          <label class="form-label" for="typeEmailX-2">Email</label>

        <div class="form-outline mb-4">
          <input type="number" formControlName="password" id="mobileNumber" class="form-control form-control-lg"/>
          <label class="form-label" for="typePasswordX-2">Mobile Number</label>

        <div class="form-outline mb-4">
          <input type="password" formControlName="password" id="typePasswordX-2" class="form-control form-control-lg"/>
          <label class="form-label" for="typePasswordX-2">Password</label>

        <div class="form-outline mb-4">
          <input type="password" formControlName="confirmPassword" id="typePasswordX-3" class="form-control form-control-lg"/>
          <label class="form-label" for="typePasswordX-3">Confirm Password</label>

        <button [disabled]="!this.signupForm.valid && !this.isPasswordValid()" class="btn btn-primary btn-lg btn-block" (click)="signUp()">Create Account</button>


Dawid Wajszczuk staff commented 2 years ago

Your code is fine. Here is the snippet Do you add this login form via JS? If so, try Updating label width or Dynamic input initialization sections from

Dawid Wajszczuk staff commented 2 years ago

Do you use angular version of our package If so, there will be no new mdb.Input(formOutline).update() and you should use completely different sytnax for angular input

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.10.2
  • Device: Laptop
  • Browser: Brave and Firefox
  • OS: Ubuntu 20.01.4 LTS
  • Provided sample code: No
  • Provided link: Yes