mdb-ui-kit
mdb-ui-kit copied to clipboard
mdbootstrap
Form validation message does not wrap in input group
Hello,
I'm using MDB 6.2.0.
The .invalid-feedback class nested in .input-group is shown right to the input instead of being wrapped to the bottom and the input itself is shrunk:
how can we reproduce this issue? Maybe it's enough to improve the structure of the HTML? See this example in the documentation: https://mdbootstrap.com/docs/standard/forms/validation/#section-basic-example. The email field is the input group and everything is in the right place.
how can we reproduce this issue? Maybe it's enough to improve the structure of the HTML? See this example in the documentation: https://mdbootstrap.com/docs/standard/forms/validation/#section-basic-example. The email field is the input group and everything is in the right place.
Hi, thanks for your reply. This is how my row looks like - the input takes the whole row (its not in columns like in the example):
<div class="pt-1 pt-md-3 col-12 form-group"><div class="input-group"><span class="input-group-text"><i class="bi bi-person"></i></span><input type="text" name="username" class="form-control" placeholder="Používateľské meno alebo E-mail *" required="" autofocus=""><div class="invalid-feedback mt-2">Musí byť uvedené</div></div></div>
I checked this code and input fills the entire width. After validation, feedback shows up on the input. But that's because you overwrote its margin top. I see you added the .form-group class as well. It is currently not used by us. Have you added any custom styles there or are you using another UI Kit that uses this class?
Yes, I've been using .form-group class for historical reasons, currently it sets margin-bottom only. However in a meanwhile I've upgraded the MDB UI kit together with this fix what solved my problem:
.input-group { flex-wrap: wrap; }
It was set like this in the previous releases (prior to 6.2), but been broken afterwards. Please evaluate whether it would make sense to include to the upcoming releases. Thank you.
I'm not sure what you mean. Has this code been removed? from what i can see it should still be available. Can you point to the specific place it was removed from?
