Foundation-sites: [Forms] Input Group button sizing variation 6.0.5

[bwydev]

The changes in 6.0.5 recommend adding a wrapper for the input-group-button class. However the button ends up larger than the input field with this method.

Gives taller button than input (6.05 method):

<div class="input-group">
    <input class="input-group-field" type="text" name="keywords" placeholder="Search">
    <div class="input-group-button">
        <input type="submit" class="button" value="Search">
    </div>
</div>

Gives equal sized button (legacy method: works):

<div class="input-group">
    <input class="input-group-field" type="text" name="keywords" placeholder="Search">
    <a href="#" class="input-group-button button">Search</a>
</div>

Docs: http://foundation.zurb.com/sites/docs/forms.html
Releases: https://github.com/zurb/foundation-sites/releases/tag/v6.0.5

[joshmedeski]

I changed the $button-sizes: default value and it caused the same issue. I'm going to fix it now and submit a PR :smile:

If you want to make sure it lines up correctly, make sure you keep the $button-sizes default value at 0.9rem. Hope it helps.

[joshmedeski]

So how do you guys want to do about solving this problem?

The Problem
Buttons/links that are in an input group do not align unless the settings are at their default values for $button-group: default and $input-prefix-padding and $input-font-size. If you change any of these values, the buttons/links and inputs do not align vertically.

The (Possible) Solution
_Match Button with Input Styles:_ We can match the button with the input's styles so that the button's height, padding, and font-size match the input's height, padding and font-size.

Further Discussion
When someone is using the input group, they want the button and input to align vertically. Right now, it is really easy to change something in the settings that will break this vertical pixel perfection.

I'm willing to take some time to fix this problem, please let me know if I should take the time to invest in fixing it or if it needs further discussion.

[andycochran]

@joshmedeski Seems to me that if you group a button and input, you want the button height to match the input height, regardless of the default button size. So .input-group-button > .button { … } should override default button styles.

[stianpr]

Having a <button> inside an .input-group-button with a large text will cause it to wrap, making the button much higher than the input field. I fixed this by adding white-space:no-wrap on the <button>. I think it's how the text for <input> buttons differ from a text node in <button> in the case of wrapping due to width of the container. Hope this made some sense.

[andycochran]

I do not think we should support button sizes within an input group. They should override any styles (default or size-specific) and match the input. @joshmedeski, any luck with that PR? Lemme know if you need assistance.

[andycochran]

@stianpr, did you mean a long amount of text or large sized text? Could you recreate the bug in a CodePen?

[stianpr]

@andycochran Here is an example: http://codepen.io/anon/pen/mPzRoG

[kball]

With #8695 being merged, is this good to close?

[andycochran]

Unfortunately, no. It's a separate issue which came up in this discussion. Button sizes still break the Input Group layout. 😞

[joshmedeski]

@andycochran I can match the input-group button size with the input's size. I'll submit a PR within the next week 😸

[planetClaire]

Changing $global-font-size also triggers this bug.

[joshmedeski]

Quick update, I haven't set aside time to fully work out the bug. I'll keep @planetClaire's last comment in mind and do my best to thoroughly fix the bug.

[andycochran]

@joshmedeski Any progress on this? If not, let me know and maybe I can take a stab at fixing it.

[joshmedeski]

There is no testing for this feature, so it has slowed me down from investing any time to work on it.

[joshmedeski]

You are welcome to take a look.

[andycochran]

Take a look at #9308, which should close this.