Revision history [back]

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.

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!

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!

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!