Button and input to have same height
Hi, I wanted to make the same height of button as of input field.
I tried to do, but didnot find the solution.
https://codepen.io/hamzacodepen951/pen/WNPqpMO
8 Replies
Your button is extra tall because it's stretching to match the height of the other flex-item .coupon-input
If you put an
outline: 1px solid red on coupon-input you'll see. If you make your coupon-input fit the content that is inside, the button will stretch to match that height.ok
I applied this code on .btn-coupon, problem is solved, but not sure if it is a good way to do it or not.
padding: unset;
margin-bottom: var(--space-medium);
I think a better way is to make the coupon-input hug it’s content. You want your button to have padding and although it may look like it’s fixed on your screen, it’s a bandaid that will fall off on other browsers or as different screen sizes.
I understand your point but I could not find any other way except padding: unset;
margin-bottom: var(--space-medium); for coupon button.
Could you please tell me how you would solve it?
oh I found the solution by removing margin-bottom from .text-input, and giving the same padding to input and button
Yep see how making the .coupon-input( that wraps the input) hug the input and the button stretches to match the height of that element? That’s what I was talking about.Now it’s not a “magic-number” bandaid. Good work!
Thank you so much