Foundation-sites: Input-group-buttons not sized right with input-group-field

[gskaplan]

The problem can be seen in the online docs under "Inline Labels and Buttons". Notice that the Submit button is a pixel or two smaller than the input field. Here's a snippet from the 6.4.1 docs:

[rafibomb]

I wonder if it's because buttons have no border by default. Can you see if the difference is the width of a 1px border?

[gskaplan]

I added a border but it made the button smaller. It appears that the input-group-button is sized properly but the button isn't.

In Chrome, if I remove the "Height: 2.5rem" property, the size goes to what appears to be normal. In my CSS, I changed the height of the button to "height: 100%" and that seems to get it back to its proper size.

[rafibomb]

Here's how I would fix it. The idea is that there are no fixed heights. The input is the tallest element so it set's the height naturally. The .input-group is a flex parent so it's direct children will be equal height.

So, we add display: flex, to .input-group-button

Then remove the height from the .button and add align-self: stretch;

Example- change the input height in the example: https://codepen.io/rafibomb/pen/RgdBKy?editors=1100

Any issues or objections? If not - let's make a PR for this - takers?

[gskaplan]

That seems to work for now; is there a global variable that I can use for the size rather than hardcoding it? I think it was 2.5rem by default, but not sure how that is derived.

[IamManchanda]

I think as rafi mentioned this below is fine and not hardcoding

.input-group-button {
  display: flex;
  .button {
    height: auto;
    align-self: stretch;
  }
}

[gskaplan]

Thank you - I had assumed that in Rafi's codepen example, setting the height was necessary, but after tinkering with it, came up with the exact same code you wrote. This does solve the problem with no hard coding of height.

I hope this makes its way into an upcoming update.

Thank you @IamManchanda and @rafibomb!

[IamManchanda]

I hope this makes its way into an upcoming update.

Hey @gskaplan, You know what you can be the one who bring this update to foundation :wink:
See => https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/

[IamManchanda]

Just create a PR for this update and i will look into it and get that merge in :wink:

[gskaplan]

I will definitely look into this!

[IamManchanda]

@gskaplan Any updates ??

[gskaplan]

@IamManchanda I created a pull request #10453 for the fix. Note that this is my FIRST contribution and as such, I was not familiar with proper protocol for testing this fix. I would be happy to do more robust testing if someone could provide me with some testing guidance. I did not test this for the legacy float grid.

[IamManchanda]

@gskaplan you made a bit of mistake in that PR... have added there on how to do a correct PR

On testing,
This fix just need visual testing ... Its basically npm run test:visual
See https://github.com/zurb/foundation-sites/wiki/Testing-Guide#visual-regression-tests

[IamManchanda]

Sorry this was closed by mistake... Dang Sorry :smile:

[Vinnl]

Since there was no activity anymore, I've recreated the PR here: https://github.com/zurb/foundation-sites/pull/10503

[gskaplan]

I don't understand what is meant by "there was no response from me". I made the changes as requested by @IamManchanda and checked them in. I inquired if I had to make a new pull request, which I believe I tried to do but it seemed that the original one was enough. I added tests and renamed things as requested. Since this was my first contribution, I'm assuming I must have missed a step somewhere to mark it as ready. Is my original pull request void now?

[Vinnl]

@gskaplan Ah sorry, I'd missed #10456 and only saw #10453 - my bad!

@IamManchanda did request another change though which you didn't respond to yet. I've suggested the requested change here, so you only have to press approve: https://github.com/gskaplan/foundation-sites/pull/1 :)

[IamManchanda]

No need to be serious about this ...
@gskaplan Please go ahead and make proposed changes in PR

@Vinnl Thanks for your kind help!

[gskaplan]

@IamManchanda So, if I'm following what happened with GIT:

• I made a new branch from develop called hotfix/input-group-button-sizing
• It was then closed by Harry, then re-opened by Harry
• Harry made some comments
• I made some changes, added some test files and committed/pushed to my branch
• Harry made another request about attribute ordering that I didn't respond to
• Vinnl created a new pull request, then deleted/closed it
• Vinnl made a pull request of my pull request and made some changes to the ordering and checked it in requesting an approval.
• I approved his changes
• I merged his changes into my PR

Does that sound like where we are now? So my PR is ready to be approved?

[IamManchanda]

It was then closed by Harry, then re-opened by Harry

That was by mistake that I am sorry about... It happens... We are humans... even robots make mistakes dude!!!

[gskaplan]

@IamManchanda don't be so serious! :-) I was just trying to figure out what happened. This is my first time contributing so there was a lot of GIT stuff going on. I'm more interested to know if I've caught up now. I hope you didn't think I was being angry - not at all, it's just that GitHub sometimes gives me migraines.

[IamManchanda]

it's just that GitHub sometimes gives me migraines

And here am i who just cant live without git and github ;)

[rafibomb]

Duplicate https://github.com/zurb/foundation-sites/issues/10497

[shuhaowu]

I see the PR is merged.. which version of foundation is this bug fixed for?

[DanielRuf]

I see the PR is merged.. which version of foundation is this bug fixed for?

6.4.2 I think

[DanielRuf]

It seems to be right now, at least in Chrome.

https://foundation.zurb.com/sites/docs/forms.html#inline-labels-and-buttons

[DanielRuf]

@ncoden can you still reproduce it?

[ncoden]

Should be fixed by https://github.com/zurb/foundation-sites/pull/10456.