Topic: Outlined input label is transparent when in input group

Giovanni De Stefano priority asked 3 years ago

Expected behavior Given an outlined input field in a form:

  <form autocomplete="off" [formGroup]="form">
    <div class="md-form md-outline">
      <input mdbInput type="text" class="form-control" id="foo1" formControlName="foo1">
      <label for="foo1">Label 1</label>

The outlined input label is displayed correctly

enter image description here

And I would expect the same behavior when the same input field is part of an input group

  <form autocomplete="off" [formGroup]="form">
    <div class="md-form md-outline input-group">
      <input mdbInput type="text" class="form-control" id="foo2" formControlName="foo2">
      <label for="foo2">Label 2</label>
      <div class="input-group-append">
        <button mdbBtn color="info" size="md" class="m-0 px-3 py-2" type="button" id="button-foo2"

But the label is transparent

enter image description here Actual behavior

It might be a bug :-) In the meantime can you please tell me how to fix it?

Thanks! Resources (screenshots, code snippets etc.)

Grzegorz Bujański staff answered 3 years ago

Hi. Thanks for reporting this bug. We'll fix it. Until we fix it as a workaround change the label z-index: label {
  z-index: 3;

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: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 10.0.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No