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

Wrap modes put input into second line #37

Closed
jcubic opened this issue May 20, 2023 · 3 comments
Closed

Wrap modes put input into second line #37

jcubic opened this issue May 20, 2023 · 3 comments
Labels
good first issue Good for newcomers

Comments

@jcubic
Copy link
Owner

jcubic commented May 20, 2023

I'm not sure why this is happening, but wrap mode makes the input that is min-width: 40px go to the second line. It should fit into the first line unless the text doesn't fit.

Przechwycenie obrazu ekranu_2023-05-20_13-46-23

https://codepen.io/jcubic/pen/YbYpqO?editors=1010

@jcubic jcubic added the good first issue Good for newcomers label May 20, 2023
@lucasnetau
Copy link
Contributor

lucasnetau commented May 21, 2023

@jcubic I think this is more an issue with Firefox not shrinking inputs in a Flexbox. The codepen works correctly in Safari and Chrome. https://bugzilla.mozilla.org/show_bug.cgi?id=1242914

A further look is that Firefox sets the input's size property to a default of 20 which sets the minimum size of the input, overflowing the container and wrapping. Adding size="1" to the input fixes the issues. I'll do some tests on the other browsers then raise a PR

@jcubic
Copy link
Owner Author

jcubic commented May 21, 2023

The screenshot is from Google Chrome but on Linux.

@jcubic
Copy link
Owner Author

jcubic commented May 21, 2023

It seems that adding:

.tagger .tagger-new {
    width: 1px;
}

solves the issue.

jcubic added a commit that referenced this issue May 21, 2023
@jcubic jcubic closed this as completed May 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

2 participants