Menu icon Foundation
Make text input field and basic button same height inside a collapsed row

Using the Flex Grid I have a row with 2 columns.

Inside the first column I have a basic or normal sized button. Inside the second column I have a normal text input field. Using the “medium-collapse” class on my row I noticed that the button and the input are not exactly the same height. The button is a few pixels higher.

I tried to use the align-stretch class on the row but this is not making my button and input the same height.

I also read about the inline labels and buttons but that is not what I need.

So what is the most efficient way to make this button and input field the same height on all browsers?

 

Thanks

 

Jimmy

flex gridbuttontext input fieldcollapseFoundationgridvertical alignstretchinline label

Using the Flex Grid I have a row with 2 columns.

Inside the first column I have a basic or normal sized button. Inside the second column I have a normal text input field. Using the “medium-collapse” class on my row I noticed that the button and the input are not exactly the same height. The button is a few pixels higher.

I tried to use the align-stretch class on the row but this is not making my button and input the same height.

I also read about the inline labels and buttons but that is not what I need.

So what is the most efficient way to make this button and input field the same height on all browsers?

 

Thanks

 

Jimmy

Shoaib Iqbal over 3 years ago

By default the button and input height is different, as seen in the docs button height is approx 40.47px and input height is 39px. You can use .input-group to make it same height. see http://foundation.zurb.com/sites/docs/forms.html