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!
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
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 )editAsked: 2019-08-31 02:27:30 +0800
Seen: 9 times
Last updated: Sep 04 '19
Tags
People
Badges
Help
