Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button with icon is misaligned vertically #12681

Closed
adnan-i opened this issue Oct 16, 2018 · 3 comments
Closed

Button with icon is misaligned vertically #12681

adnan-i opened this issue Oct 16, 2018 · 3 comments
Assignees
Labels

Comments

@adnan-i
Copy link

@adnan-i adnan-i commented Oct 16, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.10.1

Environment

Mac OS High Sierra, Chrome 69, Firefox 62

Reproduction link

Edit on CodeSandbox

Steps to reproduce

As shown in codesandbox: Place two or more Button components next to each other. Specify icon property on one of the buttons.

What is expected?

When arranging several circle buttons next to each other in-line, all buttons should have equal vertical alignment

What is actually happening?

Buttons with icon are dropped several pixels below the line in Chrome and raised in Firefox


screen shot 2018-10-16 at 14 34 11

@ilanus
Copy link
Contributor

@ilanus ilanus commented Oct 16, 2018

@afc163 can be solved with display: block on i and svg level? or situation is more complicated? 😄 vertical-align also option

@afc163
Copy link
Member

@afc163 afc163 commented Oct 17, 2018

https://codesandbox.io/s/5x73o2q7vl

It may not be the problem of icon buttons but the empty button, which is pretty weired usage.

@afc163 afc163 closed this in 86c11e5 Oct 17, 2018
@adnan-i
Copy link
Author

@adnan-i adnan-i commented Oct 22, 2018

@afc163 I was using empty circle buttons with custom background color while making a color picker. I wanted to utilise the hover effect of the antd Button, and in terms of semantics using the element here makes sense. My workaround is to add a "." character to the "empty" buttons and apply "text-indent: -9999px". And yes, I can confirm that the issue is within the empty buttons and not icon buttons.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants