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 5 years ago
Hi,
thank you for sharing your solution.
Best, Marta
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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