Design comparison
Solution retrospective
The most difficult part on this project was the Javascript code, but it was good to learn. There is one problem (I think) on my screen when I press submit without filling any of the inputs some elements go outside of the screen and cannot be visible. If you got any solution for that, or any other things that you found not correct in my code I would like to give me some feedback. 👍
Community feedback
- @huanfsPosted 12 months ago
to solve the problem, you can turn ".error-text" in a positioned element, using "position:relative" and fixing it in a fixed position under the form, and finaly turns it invisible in two ways, or using "display:none" and making it a "display:inline", or making it invisible using "opacity:0" and turning it visible using "opacity:1". in that way, the error message will exists invisible fixed in a position declared and the layout not change while they apears
Marked as helpful0@AymaneOnlinePosted 12 months ago@HuanFs I've got your idea, it should actually work, besides using only "display:none" and switching it with "display:inline" which not only hides the element but also delete the space that it should take when it's visible (At least that's what happened to me, i don't know if it could work in another way 🤔), but the only thing that would happen then is that it will not match the actual design that we were giving, because there is some space out there between the error-text and the input. Thank you for your solution, it could possibly help me in another project.👍
0@AymaneOnlinePosted 12 months ago@HuanFs I've just updated my style.css file as you said (by switching the opacity from 0 to 1), it works properly.👍 Thanks.👌
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord