How do I give the input the remaining space?
For some reason when I put flex-grow: 1; on it it still doesn't grow and width: 100%; pushes the button down.
7 Replies
flex-grow: 1
should work. Could you share the HTML too?yes.
So, the
input
and button
aren't flex items, because the parent is the form
and not the .submit-form
. I'd remove the display: flex
from there, and put it on the form itself (or simply remove the entire section, and add that class to the form itself)I see 😁
It works now. Thank you.
a bit offtopic - you should use the url type, which automatically validates if it is valid or not, so you dont have to do it in javascript (you still are required to do it in the server)
also, with a bit of trickery, you can implement the background in pure css, using the clip-path rule, which will save you a network request
@ἔρως I didn't knew or forget that there was a url type thank you for the tips.
you're welcome
by the way, you can use the :user-invalid pseudoclass to style it, to indicate it is an invalid url
on google chrome, you will have to "emulate" it by using :focus:invalid