Topic: Material input group with md-outline doesn't work
Expected behavior
Actual behavior
Resources (screenshots, code snippets etc.)
Hi,
for now, we don't have outline styles for input group. We will implement them in the future.
Best, Marta
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 2 years ago
Hi,
thank you for sharing your solution.
Best, Marta
Answered
- User: Free
- Premium support: No
- Technology: jQuery
- MDB Version: 4.7.4
- Device: ThinkPad P50
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No