Problem with: Padding, CSS, and Hflex

asked 2011-10-26 12:47:50 +0800

connollyst gravatar image connollyst

Hey all,

I'm hoping for some help with this little annoyance in ZK.

So, as ZK admits, the default CSS gives every page 5px padding on the left and right. This isn't really ideal for me though, I want my header and footer to span the whole page for sure and, frankly, if I want any part of my page to have 5px padding.. I'll specify that myself.

Alright, so I just override this with "padding: 0" and everything looks good. However, when I start using hflex as ZK suggests I see the Hflex algorithm is assuming there is 5px padding to each side of the body and I'm left with a 10px gap on the right side of my page. If you resize the browser, however, the hflex algorithm correctly recalculates the full width of the page and the 10px disappears. Some other interactions with the page will also initiate a recalculation of the component widths and the 10px will disappear but I haven't nailed down exactly what kind of interactions do this (maybe anything that invalidates a component?).

Anyway, I'm assuming example code isn't necessary here but can provide it if the explanation isn't clear.

It seems to me like something baked into ZK that would require a bug fix rather than there being a work around.. but would love feedback from the community.


delete flag offensive retag edit

3 Replies

Sort by ยป oldest newest

answered 2011-10-28 01:43:42 +0800

matthewgo gravatar image matthewgo

updated 2011-10-28 01:45:04 +0800

Hi Sean,

Are you using 5.0.8?
I found this bug only happen in 5.0.8 and 5.0.9 works well
This is my sample

    <grid hflex="1">
            <auxheader colspan="4" label="Contributor of ZK International Message(Part)" />
            <column hflex="4">Language</column>
            <column hflex="5">Contributor</column>
            <column hflex="2">Charset</column>
            <column hflex="3">Comment</column>
                <label value="Arabic (ar)" />
                <label value="Ayman Elgharabawy" />
                <label value="iso-8859-6" />
                <textbox value="" width="150px" />

link publish delete flag offensive edit

answered 2011-11-02 20:18:43 +0800

connollyst gravatar image connollyst

updated 2011-11-02 20:19:08 +0800

Hey Matthew,

I was using 5.0.8 and just had a chance to check out 5.0.9, lo and behold, the problem is gone!


link publish delete flag offensive edit

answered 2012-05-18 05:59:45 +0800

charlie1989 gravatar image charlie1989

Hi Sean and Matthew,

I test both 5.0.11 and 5.0.9 and already have the problem.
But I find it out, I override it in my css file : body{padding:0;}
and it works.


link publish delete flag offensive edit
Your reply
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: 2011-10-26 12:47:50 +0800

Seen: 338 times

Last updated: May 18 '12

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