Broken label of text input after opening modals


Topic: Broken label of text input after opening modals

Neal Sebastian asked 5 years ago

Expected behavior label should disappear when text is entered

Actual behavior label overlaps with text entered

Resources (screenshots, code snippets etc.)

https://storage.cloud.google.com/ns-mdbootstrap/support/broken-label-efect.mov?organizationId=601552522793

<div class="md-form">
          <input id="eventTitle" type="text"class="form-control">
          <label for="eventTitle">Event Title</label>
 </div>

Arkadiusz Idzikowski staff answered 5 years ago

Label should not disappear when text is entered, it should be lifted up. You need to add mdbInput directive to the input element to activate this option or use placeholder instead of label if you want the default text to disappear.

<div class="md-form">
  <input mdbInput id="eventTitle" type="text" class="form-control">
  <label for="eventTitle">Event Title</label>
</div>

or

<div class="md-form">
  <input id="eventTitle" type="text" class="form-control" placeholder="Test">
</div>

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.1.1
  • Device: Desktop
  • Browser: Chrome
  • OS: OSX
  • Provided sample code: No
  • Provided link: Yes