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

Comments

Projects
None yet
4 participants
@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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Member

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

This comment has been minimized.

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.

ilanus added a commit to ilanus/ant-design that referenced this issue Oct 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment