Caption align problem in ZK7

Question

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

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?

Thanks

Answer 1

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

stream
81 ● 3

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

sitansu
2254 ● 13
http://java91.blogspot.in...

You can use some alternative approach,

e.g.:

<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>
            <div width="120px">
                <label value="some label" style="font-weight:bold; color:black"/>
            </div>
        </hlayout>
        <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"/>
        </menubar>
    </hbox>
</window>

Answer 2

0

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

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

Comments

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

http://tracker.zkoss.org/browse/ZK-2277

stream ( 2014-05-02 21:39:53 +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

Answer 3

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

jumperchen
3909 ● 2 ● 8
http://jumperchen.blogspo... ZK Team

You can add a style to force them to right.

For example,

<zk>
    <style>
    .z-caption .z-label {
        float: right;
    }
    </style>
    <window title="My First Window" border="normal" width="200px">
        <caption> test</caption>
        Hello, World!
    </window>
</zk>

Answer 4

0

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

stream
81 ● 3

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

link publish delete flag offensive edit

Answer 5

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

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" />
                    </div>
                </caption>

                <panelchildren>
                    <label value="content"/>
                </panelchildren>
            </panel>
    </portalchildren>
</portallayout>

Answer 6

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

cor3000
6280 ● 2 ● 7

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

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

Caption align problem in ZK7

6 Answers

Comments

Question tools

Stats

Related questions