Menu icon Foundation
Inline Labels and Buttons - Input Group doesn't line up

Please refer to:

http://foundation.zurb.com/sites/docs/forms.html

The $, the input and the button of your own example don't line up.

According to the browser element inspector, the heights are as follows:

$ = 40.8667px

Input = 40px

Submit = 40.8667px

How do I make all their heights the same?

input group

Please refer to:

http://foundation.zurb.com/sites/docs/forms.html

The $, the input and the button of your own example don't line up.

According to the browser element inspector, the heights are as follows:

$ = 40.8667px

Input = 40px

Submit = 40.8667px

How do I make all their heights the same?

This post has been closed. No new replies can be added.

Rafi Benkual about 3 years ago

Not sure what you mean - the inputs all seem to have the same height:

If you share the markup you're working with, we can help you more. Here is a blank codepen: http://codepen.io/rafibomb/pen/ZBGbMx (fork it and share back the new link)

Wick Wun about 3 years ago

Hi Rafi

Just load the Foundation Forms webpage in Firefox (latest), scroll down to Inline Labels and Buttons and you'll see this:

Buttons and input don

What are you using to record those gif animations?

Wick Wun about 3 years ago

In Edge, the Inline Labels and Buttons don't line up.

In Firefox, the Inline Labels and Buttons don't line up.

In Chrome, the Inline Labels and Buttons do line up.

 

Any help to fix this would be appreciated.

Wick Wun about 3 years ago

Can someone please confirm if this is a bug or not, thank you.

Note that the Inline Labels and Buttons only line up in Chrome.

Wick Wun almost 3 years ago

Thank you Zurb, for fixing this problem in 6.3.0.