Horizontal flex issue

asked 2015-11-26 13:35:36 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

Hi to all,

This is an issue i had with all ZK versions and i am trying to ignore it. Suppose you want to render the following simple page header:

image description

As you see the button refresh is aligned to the right side. The code for this is as simple as the following snippet:

<div vflex="1" hflex="1">
  <hlayout valign="middle">
    <div hflex="1">
        Page Title
    <button label="Refresh" sclass="btn btn-warning" iconSclass="z-icon-refresh" />

The problem is that it doesn't work always well. If you try to open this page in Chrome for example, you will notice that the "refresh" button is not aligned always correctly. Pressing F5 or CR to reload the page does not have the same behavior. Usually if you press CR in the browser's address bar will load the page correctly.

It doesn't look as a big problem, but if you have quite a few widgets docked on the right side, the last one goes off the screen.

Are you aware of this or any related open ticket?



delete flag offensive retag edit

1 Answer

Sort by ยป oldest newest most voted

answered 2015-11-26 14:38:19 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6

updated 2015-11-26 14:40:05 +0800

In my experience, the behaviour you describe comes from the <hlayout> when combined with many hflex.

You should consider a css approach such as the following (quick improvable example):

<div vflex="1" hflex="1">
    <div style="float: left;">Page Title</div>
    <button label="Refresh" sclass="btn btn-warning" iconSclass="z-icon-refresh" style="float: right;"/>

Hope it helps. Gio

link publish delete flag offensive edit


Gio you are right. +1

cyiannoulis ( 2015-11-26 15:09:22 +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: 2015-11-26 13:35:36 +0800

Seen: 34 times

Last updated: Nov 26 '15

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