Topic: Material input group with md-outline doesn't work

beexclusiv free asked 5 years ago

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

gianlucagiacometti priority answered 5 years ago

Well, there is an easy workaround for this.

On page load run this script:

$('.input-group').each(function() {
  $(this).find('label').css('margin-left', $(this).find('div.input-group-prepend').width()).css('margin-left', '+=0.25rem');
  if ($(this).find('.validate').length) {
    $(this).css('margin-bottom', '2.5rem');

Put focused label above the bootstrap default z-index level for input-groups in your CSS file (3)

.input-group {
  > .form-control:focus +label,
  > .custom-select:focus +label {
    z-index: 4;

Marta Wierzbicka staff commented 5 years ago


thank you for sharing your solution.

Best, Marta

Marta Wierzbicka staff answered 5 years ago


for now, we don't have outline styles for input group. We will implement them in the future.

Best, Marta

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 jQuery
  • MDB Version: 4.7.4
  • Device: ThinkPad P50
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No