0

Bad layout when mixing fixed width grid columns with hflex

asked 2020-06-25 03:00:56 +0800

digulla gravatar image digulla
502 4

updated 2020-06-29 09:42:47 +0800

cor3000 gravatar image cor3000
5250 2 7
ZK Team

When mixing grid columns with a fixed with (in em) and hflex, the results are unsatisfactory. I've created a fiddle:

https://zkfiddle.org/sample/1ajl3ur/2-Show-problems-with-mixing-hlfex-and-fixed-width

It works much better when I use widths in px but then the content gets cut off when the font sizes change (my fonts adjust in relation to screen size).

Any suggestions how I can create table cells that scale with font size?

Tags (which I can't assign): grid hflex em

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted
0

answered 2020-06-29 14:51:07 +0800

cor3000 gravatar image cor3000
5250 2 7
ZK Team

Apparently/unfortunately grid doesn't do what you expect (I won't argue whether this is intuitive or ideal). As of now: only if pixel widths are set on all columns it considers the table to have fixed width (didn't test for hflex="min" yet), other units like %,em,rem,vw don't get this special treatment and the

elements has a width of 100% resulting in columns spanning over the whole width (increasing their width proportionally). I assume this behavior ranges back to the beginning of ZK where alternative units other than px and % were not widely spread.

So in short ZK doesn't implement a defined behavior for 'em' units in this case.

You provided multiple examples showing various effects based on this limitation. Which is the one you need most so I can provide a workaround or custom styling approach if possible at all?

About your last question, it's easiest to specify an em width for the whole table and then use hflex only for the columns. Like that you can at least calculate/control the resulting widths in a deterministic way.

e.g: https://zkfiddle.org/sample/25ebsv8/1-em-width-grid

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2020-06-25 03:00:56 +0800

Seen: 9 times

Last updated: Jun 29

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More