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

[Table] starting at 2.7.4 on iPad tables look like iPhone #681

Closed
keshmir opened this issue Apr 23, 2019 · 3 comments
Closed

[Table] starting at 2.7.4 on iPad tables look like iPhone #681

keshmir opened this issue Apr 23, 2019 · 3 comments
Assignees
@lubber-de
Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug
Milestone
2.7.5

Comments

@keshmir
Copy link

keshmir commented Apr 23, 2019 •
edited
Loading

Bug Report

I believe this could be a break point issue with media types. Tables on iPad look like phone meaning table cells stack up as rows. This is behaviour desired for phones not iPad. You can use Chrome developer view set to iPad to reproduce this.

[Update] This is actually not only for tables. All stackable grids start stacking in iPad which they shouldn't.

Steps to reproduce

  1. In Chrome go to docs, go to Tables: https://fomantic-ui.com/collections/table.html
  2. Use inspector and set device to iPad (not iPad Pro)

Expected result

Table cells should remain as cells

Actual result

Table cells stack up into rows as they would on iPhone

Version

2.7.4
@lubber-de
Copy link
Member

Related to #567 it seems, the 768px also cover 767.99 pixels (which is set as breakpoint.)
Changing the breakpoint to 767.98px instead makes it work again...i'll prepare a PR making sure the #567 will still work

@lubber-de lubber-de added this to the 2.7.5 milestone Apr 23, 2019
@lubber-de lubber-de added type/bug Any issue which is a bug or PR which fixes a bug lang/css Anything involving CSS labels Apr 23, 2019
@lubber-de lubber-de self-assigned this Apr 23, 2019
@lubber-de lubber-de mentioned this issue Apr 23, 2019
Merged
@lubber-de
Copy link
Member

Thanks for finding out and i apology for the behavior.
Should be fixed by #686

@keshmir
Copy link
Author

keshmir commented Apr 23, 2019

Thanks to you guys for quick responses. looking forward to 2.7.5

@lubber-de lubber-de added the tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build label Apr 26, 2019
exoego pushed a commit to exoego/Fomantic-UI that referenced this issue Apr 30, 2019
@lubber-de
fix(*): breakpoints ignoring next breakpoint in some cases
1c67e4f 
Especially recognized in table or grid elements a breakpoint wasn't correctly fetched by the browsers, because the floating max value covers a 0.99 of the "before pixel" (was implemented by fomantic#567)
While mathematically correct, it was not working on the browser to correctly recognize the next full pixel again. (768 pixel were still recognized as something below)
I found out that it was working again when we'll use 0.98 of the breakpoint pixel (instead of 0.99.
This way the dpi fix of fomantic#567 still works but also fixes fomantic#681 now.
While i was testing with different dpi settings and windows resizings, i never came across a value of xxxx.99, so xxxx.98 as a breakpoint should fix both issues now.

Closes fomantic#681
@y0hami y0hami closed this as completed in 7ff01e3 May 16, 2019
@lubber-de lubber-de removed the tag/next-release/nightly Any issue which has a corresponding PR which has been merged and is available in the nightly build label Jun 16, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lubber-de lubber-de

Labels
lang/css Anything involving CSS type/bug Any issue which is a bug or PR which fixes a bug
Projects
None yet
Milestone
2.7.5
Development

No branches or pull requests
2 participants
@keshmir @lubber-de