Chaning body padding, not width updated until resize

asked 2019-08-31 02:27:30 +0800

adilov gravatar image adilov
65 4

updated 2019-08-31 19:43:00 +0800

Hello everyone! I'm posting a fiddle for better demonstrating the problem with much of the content emitted for simplicity.

What's happening... I've removed the padding from some components via styles from a file (file, not directly in the zul) - let's examine the "body" for start.

When I set padding: 0 in the styles file, the paddings really disappear, but some components in the body are not sized properly after that (white and yellow backgrounds are not over the red one). Then if the browser is resized or the page is re-created (via "Executions.createComponents"), everything is fine.

Please, try the commented-out line in the fiddle - when hflex="1" is used on the vlayout. Look carefully at the space on the left and on the right - the table header and body are not sized properly, but the table grid itself is.

And if the page is re-created or the browser resized - everything goes to normal.

BUT!!! That's the most interesting part for me! If I put the styles in the zul, everything goes to normal!

Is there a way to fix this behavior or to force recalculation of size the components?

And one more question, theoretical one... If you need the same UI (left / middle / right) and the line with the text has to be the same height as its parent/s (the grid and the hlayout), would you play with the styles of the grid or do it with different components (e.g. boxes)?

Thank you!

delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2019-09-02 15:18:51 +0800

cor3000 gravatar image cor3000
5673 2 7
ZK Team

thanks for the in depth description. This is a common effect when using the <style>-component which loads the styles in place in the body, leading to a race condition with the browser's cache a (which results in unpredictable results). Since stylesheets don't have JS callbacks when the load, ZK might have performed the flex calculations too early. While when the css is cached the stylesheet will be loaded fast enough to be available when ZK calculates flex sizes.

In-lining the styles will avoid this (as you mentioned), as well as moving the styles into the page body, which can be done using the <?style ?>-processing-instruction (on your root page).

Here your updated example: http://zkfiddle.org/sample/3elradr/2-Messing-with-the-body-styles

Alternatively you can load stylesheets globally (in the page header) using a lang-addon.xml

link publish delete flag offensive edit


Great, thank you for the suggestion about style processing instruction. Everything works as expected now!

Previously I forced the resize using "Clients.resize(comp);" and passing the most outer element.

adilov ( 2019-09-04 13:39:29 +0800 )edit

thanks for getting, back... yes when dynamic style changes affect sizes/paddings/margins/border... Clients.resize is the way to inform ZK about this. Otherwise loading styles in the header initially avoids lots of trouble. That's why ZK does this with all its component styles.

cor3000 ( 2019-09-04 14:38:04 +0800 )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




Asked: 2019-08-31 02:27:30 +0800

Seen: 9 times

Last updated: Sep 04 '19

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