Bad layout when mixing fixed width grid columns with hflex

digulla
506 5

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 retag edit

Sort by » oldest newest most voted

cor3000
5673 2 7

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.

UPDATE: (the comment below seems to provide a more suitable way)

... instead of using the width="8em" property I applied an inline style style="width:8em" - seems to look alright here: https://zkfiddle.org/sample/1ajl3ur/3-Show-problems-with-mixing-hlfex-and-fixed-width

Hello, thanks for the quick answer. Somehow, I completely missed it. I'm most interested in case #4 "hflex compresses the columns with fixed width". My font size depends on the screen size. I'm trying to make the UI look the same on any display size.

( 2020-12-01 18:16:10 +0800 )edit

I hope I counted correctly ... instead of using the width="8em" property I applied an inline style width:8em, seems to look alright here: https://zkfiddle.org/sample/1ajl3ur/3-Show-problems-with-mixing-hlfex-and-fixed-width

( 2020-12-14 16:21:29 +0800 )edit

Yep, that would work for me. Thanks a lot! Can you please update the answer to explain this trick so people won't be confused?

( 2021-01-23 01:36:53 +0800 )edit

I wonder what the "trick" is and what confusion might be caused. instead of using the width property which is going though ZK's setWidth js - likely with (wanted/unwanted) side effects. I use setStyle which adds some verbatim styles to the dom element. The "trick" is to call the more basic method.

( 2021-01-25 10:22:04 +0800 )edit

I wasn't aware that you can change the width using CSS styles. So just take the text from the second comment and add it to the answer.

( 2021-01-31 04:22:44 +0800 )edit
[hide preview]