Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Form validation message does not wrap in input group #1518

Open
fullopt opened this issue Mar 21, 2023 · 6 comments
Open

Form validation message does not wrap in input group #1518

fullopt opened this issue Mar 21, 2023 · 6 comments

Comments

@fullopt
Copy link

fullopt commented Mar 21, 2023

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:

image

@gbujanski
Copy link
Member

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.

@fullopt
Copy link
Author

fullopt commented Apr 4, 2023

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>

@gbujanski
Copy link
Member

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?

@fullopt
Copy link
Author

fullopt commented Jul 3, 2023

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.

@gbujanski
Copy link
Member

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?

@Kedarnath-Rothe
Copy link

Please assign me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants