Topic: Overlapping labels on fields, added after ajax request
We have a single-page-application, that load new inputs after user actions by ajax requests.The loaded html-code-snippets will added by jQuery html()-method.New inputs are overlapped by the labels. It seems, that these inputs not correct initialized by mdb.
Sorry, the snippet was broken. I have corrected it.
Currently, we don't have any quick fix for that, but what you can do is manually adding the .active class to the <label>
Hi Bartłomiej,
thank you for your answer.
Yes, currently I wrote my own quick fix. It will run on $(document).ready().
$("input.form-control").each(function (index, input) {
var $this = $(input);
var $labelAndIcon = $this.siblings('label, i');
var hasValue = $this.val().length;
var hasPlaceholder = $this.attr('placeholder');
if (hasValue || hasPlaceholder) {
$labelAndIcon.addClass('active');
}
});
Unfortunately, this does not completely solve my problem. After field lose focus, the label overlaps the field again.
For general fix I would like prefer an initialisation method, such as exists on selects and waves-effects:
// Material Select Initialization
$('.mdb-select').materialSelect();
Waves.init();
Best regards,
Yvonne Findeis
Senior Software Engineer
Cegeka Deutschland GmbH
Bartłomiej Malanowski staff pro premium commented 6 years ago
This issue is on our TODO list so I hope we'll fix it soon
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: 4.5.15
- Device: all
- Browser: all
- OS: Windows
- Provided sample code: No
- Provided link: Yes