Material input group with md-outline doesn't work

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

beexclusiv asked 6 years ago

0 0

Expected behavior

Actual behavior

Resources (screenshots, code snippets etc.)

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

Hi,

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

Best, Marta

Add comment

gianlucagiacometti pro premium priority answered 6 years ago

0 0 Best answer

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 Szymanska staff pro premium commented 6 years ago

Hi,

thank you for sharing your solution.

Best, Marta

Add comment

Write

Create snippet

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

beexclusiv

22Support score
4Questions 0Answers

0Snippets likes 0Snippets