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.

Sign up for GitHub

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

Jump to bottom

[Menu] Search should not cut off input text #5281

Closed
koddsson opened this issue Apr 17, 2017 · 4 comments
Closed

[Menu] Search should not cut off input text #5281

koddsson opened this issue Apr 17, 2017 · 4 comments
Labels
Confirmed Bug
Milestone
2.2.11

Comments

@koddsson
Copy link

Here's a fiddle demonstrating the issue. I noticed this first in the semantic docs when there's a search input in the menu component so I assume that it's pretty easy to reproduce. The fiddle is basically a copy of the code in the docs.

Here's a screenshot of what I'm getting in case the issue is not re-producable:

image

This seems to be because a border-radius on the input, since only the first letter has the cutoff:

image

Info

  • Browser: Google Chrome Version 57.0.2987.133 (64-bit)
  • OS: MacOS Sierra 10.12.4
koddsson pushed a commit to koddsson/Semantic-UI that referenced this issue Apr 17, 2017
menu/search: remove border-radius
3c89c49 
The `border-radius` property in the search input was cutting of parts of
the first letter in the prompt.

The prompt class name seems to be needed from the example in the docs[1]
so resetting the `border-radius` for a search prompt when it's in a menu
component seems like the most straight-forward solution.

[1]: https://semantic-ui.com/collections/menu.html#search

Closes Semantic-Org#5281
@koddsson koddsson mentioned this issue Apr 17, 2017
Closed
@awgv awgv added this to the Needs Milestone milestone Apr 17, 2017
@awgv
Copy link
Member

awgv commented Apr 17, 2017

Thanks. I wonder why it can’t be reproduced on the menu component’s documentation page, the markup seems to be identical; the clipping has always been there, just not that severe.

@koddsson
Copy link
Author

Hmm, I'm able to reproduce it in the menu documentations page:

image

@jlukic jlukic modified the milestones: 2.2.11, Needs Milestone Apr 17, 2017
@jlukic
Copy link
Member

jlukic commented Apr 17, 2017

It does look like its cutoff by 1px on base em. Probably could be more/less noticable if base em was different as well.

jlukic added a commit that referenced this issue Jul 2, 2017
@jlukic
#5281 fix issue with descendors cut-off in transparent input
3a7d36f
@jlukic
Copy link
Member

jlukic commented Jul 2, 2017

Fixed in 2.1.11 thank you for your patience.

@jlukic jlukic closed this as completed Jul 2, 2017
@layershifter layershifter mentioned this issue Jul 11, 2017
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Confirmed Bug
Projects
None yet
Milestone
2.2.11
Development

No branches or pull requests
3 participants
@jlukic @koddsson @awgv