Hflex not working when using MVVM and include approaches

asked 2016-04-22 17:47:05 +0800

ericksperandio gravatar image ericksperandio
55 5

updated 2016-04-30 06:31:33 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9


When I use Hflex property in a included page in a MVVM approach, it doesn't work.

The problem happens when I include some page inside another, and this page has components whose sizes are controlled by hflex property. I already tried to force the rendering of the components using invalidate on parent window load, or Clients.resize(component) when it is created inside the viewmodel class, but with no success. It just happens in this case: pages included in a MVVM scenario.

If I explicitly resize the browser window, then the components are correctly sized.

Example on fiddle : http://zkfiddle.org/sample/3bj6e5j/9-Hflex-not-working-with-include-pages-inside-div#source-1

To see the problem, click in the "Open" label, then click in the combobox. You can see that its size is only updated after resizing the browser window or after clicking in the dropdown button

Could anyone give any idea on how to solve it?

delete flag offensive retag edit


It's not zk, it's the fade in javascript who is making the fault., remove it and you see it.

chillworld ( 2016-04-29 19:04:14 +0800 )edit

Not true. If you remove it, the div won't appear since its style has "display:none", as well the included page. It seems the div component won't properly render its children in this case. Would there be a way to force its rendering in the javascript "fadeDivIn" function? Thanks in advance.

ericksperandio ( 2016-04-29 20:34:02 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted

answered 2016-04-30 06:30:19 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9

It's actually the javascript who does the fault,

Let me explain more. First you set the src of the include correct.
This is before the javascript is called, and your div don't really have a width at that moment.
So it takes that size, what you see.
Then the javascript is called and and actually he show's the div, but with the rendered with of the include at that moment.
How can you fix it : use zUtl.fireSized.

Here is your working fiddle.

Greetz chill.

link publish delete flag offensive edit


I'll do it.

chillworld ( 2016-05-01 15:57:27 +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

1 follower



Asked: 2016-04-22 17:47:05 +0800

Seen: 38 times

Last updated: Apr 30 '16

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