Caption align problem in ZK7

asked 2014-04-30 13:44:27 +0800

ggrimoldi gravatar image ggrimoldi
74 1

I'm trying to migrate a ZK6.5 project to ZK 7. I've a bad layout with captions... all became aligned to left... instead to have a label on left side and other components (buttons in my situation) on right side. I noticed that CSS for caption changed from ZK 6.5 to 7 from a couple of left and right divs to a single content div. But in this way my app GUI must be dramatically changed...

Please, can anyone help me to solve this problem?


delete flag offensive retag edit

6 Answers

Sort by ยป oldest newest most voted

answered 2014-04-30 20:54:42 +0800

stream gravatar image stream
81 3

updated 2014-05-01 05:30:26 +0800

sitansu gravatar image sitansu
2254 13

You can use some alternative approach,


<window height="100%" width="100%" position="center, center">
    <hbox align="center" spacing="0px" width="100%">
        <hlayout hflex="min">
            <div width="100px" style="text-align:center">
                <label value="some label" style="font-weight: bold;color:black"/>
            <div width="120px">
                <label value="some label" style="font-weight:bold; color:black"/>
        <div hflex="1"></div>
        <menubar hflex="min">
            <menuitem onClick="@command('someCommand')" src="/images/form_blank_16x16.png" tooltiptext="Save and Stay" autodisable="self"/>
            <menuitem onClick="@command('someCommand')" src="/images/form_blank_16x16.png" tooltiptext="Save and Close" autodisable="self"/>
link publish delete flag offensive edit

answered 2014-05-01 17:52:20 +0800

ggrimoldi gravatar image ggrimoldi
74 1

Thanks for the answer... but I could not apply this... I should refactor and test much code...

I think that in any code migration backward compatibility is a MUST... Ok for cosmetic changes... but not for structural incompatibilities...

I could not use ZK 7 in this way...

link publish delete flag offensive edit


I have just recently moved to ZK 7 and can understand frustration in your words. The same time I appreciate the fact that I can change the Theme of the project with less hardship. I created separate project for the Theme only and can modify it any time I want with minimum efforts now.

stream ( 2014-05-01 21:28:27 +0800 )edit

My frustration is simply explained... it's a lot of work! And all app should be hardly tested against all changes... is not a simple css beautifier issue... it's a change of underlying structure... caption was a table with a left and right side in ZK6.5 and became a simple div in ZK 7...

ggrimoldi ( 2014-05-02 10:32:05 +0800 )edit

I'm moving to ZK7, too. It's been more than a week changing things and testing all the application. It is a little bit tiring...

Neus ( 2014-07-17 10:41:02 +0800 )edit

answered 2014-05-08 07:50:15 +0800

jumperchen gravatar image jumperchen
3909 2 8
http://jumperchen.blogspo... ZK Team

You can add a style to force them to right.

For example,

    .z-caption .z-label {
        float: right;
    <window title="My First Window" border="normal" width="200px">
        <caption> test</caption>
        Hello, World!
link publish delete flag offensive edit

answered 2014-05-09 16:45:56 +0800

stream gravatar image stream
81 3

It doesn't work for me. I am using ZK 7.0.2.

link publish delete flag offensive edit

answered 2014-05-24 22:42:40 +0800

etedeschini gravatar image etedeschini
6 1

updated 2014-05-24 23:02:58 +0800

I have similar problem in the portallayout. With 7.0.1 it works well but with evaluation version of 7.0.2 doesn't work as expected. All buttons are not aligned to the right side with maximizable button. Moreover all buttons are positioned under "Panel Title" with double height of caption area. Example for test:

<portallayout >
    <portalchildren width="100%" height="50%">
        <panel style="padding:2px" height="100%" hflex="1" border="normal" maximizable="true" >
                <caption label="Panel Title" >  
                    <div style="display: inline;float:right;margin-right: 4px;" >
                        <toolbarbutton sclass="small" image="/filled_filter-32.png" />
                        <toolbarbutton sclass="small" image="/empty_filter-32.png" />
                        <toolbarbutton sclass="small" image="/edit_property-32.png" />

                    <label value="content"/>
link publish delete flag offensive edit

answered 2014-06-27 05:52:14 +0800

cor3000 gravatar image cor3000
4406 2 7
ZK Team

due to a structural fix in ZK 7.0.2 http://tracker.zkoss.org/browse/ZK-2209 the markup has changed.

using CSS3 a solution (for modern browsers) can be found here

link publish delete flag offensive 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




Asked: 2014-04-30 13:44:27 +0800

Seen: 139 times

Last updated: Jun 27 '14

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