0

Problem after updating to ZK 9.5.0

asked 2020-10-08 00:14:06 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

I believe there are some changes in CSS From zkoss. Please look at the video. You can see some blue color for fraction of seconds after updating to ZK 9.5. So rolled back

link text

delete flag offensive retag edit

10 Answers

Sort by ยป oldest newest most voted
0

answered 2020-10-08 00:37:29 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

Sample ZUL Which is creating problem

<grid>
                        <columns>
                            <column hflex="1"></column>
                            <column hflex="1"></column>
                            <column hflex="1"></column>
                            <column hflex="1"></column>
                            <column hflex="1"></column>
                        </columns>
                        <rows>
                            <row>
                                <vlayout>
                                    <label value="Short Name"
                                        sclass="mandatory-label" />
                                    <textbox id="code" focus="true"
                                        hflex="1" readonly="@load(vm.makeAsReadOnly)"
                                        value="@bind(fx.code)" maxlength="25" />
                                </vlayout>



                                <vlayout>
                                    <label value="Name"
                                        sclass="mandatory-label" />
                                    <textbox id="name" hflex="1"
                                        readonly="@load(vm.makeAsReadOnly)" value="@bind(fx.name)"
                                        maxlength="200" />
                                </vlayout>

                                <vlayout>
                                    <label
                                        value="Practice Identifier" class="mylabel " />
                                    <textbox id="practiceIdentifier"
                                        hflex="1" readonly="@load(vm.makeAsReadOnly)"
                                        value="@bind(fx.practiceIdentifier)" maxlength="20" />
                                </vlayout>

                                <vlayout>
                                    <label value="Medicare Number"
                                        class="mylabel " />
                                    <textbox id="medicareNumber"
                                        hflex="1" readonly="@load(vm.makeAsReadOnly)"
                                        value="@bind(fx.medicareNumber)" maxlength="20" />
                                </vlayout>
                            </row>
                        </rows>
                    </grid>
link publish delete flag offensive edit
0

answered 2020-10-08 00:38:02 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

If i remove the grid, it does not have any color issue

link publish delete flag offensive edit
0

answered 2020-10-08 10:41:17 +0800

MDuchemin gravatar image MDuchemin
1758 1 5
ZK Team

Hi Senthilchettyin,

It looks like there is 2 stylesheet applied to your component. With that flicker, it seems like the first stylesheet is the default style for the application, and that it is updated just after the grid is added to the page.

The blue containers flashing in and out looks like empty headers. Could be the default iceblue style if you are applying a css file on top of the default style. Which version are you upgrading from? The default theme switched from breeze to iceblue in ZK 8.5, so if you are using a css sheet designed on breeze, you might see artifacts because of the change in default theme. If that's the case, you can simply add breeze back and see if it restore the previous behavior.

How do you define the style for this grid? Is it a custom theme project, or a stylesheet loaded in the browser?

When you click the link in the video, are you loading a new page, or just replacing the grid in an existing page (with include, or composer)?

link publish delete flag offensive edit
0

answered 2020-10-08 13:58:22 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

Thanks for the reply. Here are more details

1) I am using breeze as default theme

2) I am trying to upgrade fro 8.6.0.1 to 9.5

3) Here is my zk.xml

4) Here is my ZKAddon.xml

5) Here is my zkstyle.css

6) Here is my mystyle.css

Let me know if you need more information

link publish delete flag offensive edit
0

answered 2020-10-09 11:48:20 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

Any update ?

link publish delete flag offensive edit
0

answered 2020-10-12 18:07:54 +0800

MDuchemin gravatar image MDuchemin
1758 1 5
ZK Team

Hi Senthilchettyin,

I've tested this locally, with styles loaded from lang-addon. On my local test, the styles are added to the page <head> tag and loaded on page load.

Please check your network response content to check if the styles are added on page load or after page load on your side.

There is only 2 choices for this effect. Either the stylesheet finish to load after the page is already displayed, or your grid uses a css class (sclass / zclass) added dynamically after the page has loaded.

If you find which one of these is happening, it would be a good step to prevent the issue.

checking the sequence of events int he browser's developper tools > network panel is a good idea here as well as using the "performance" panel to see the actions performed on client-side in JavaScript

link publish delete flag offensive edit

Comments

All these are fine. But how ZKOSS team can change this behaviour just updating from one version to another version without any changes. Very bad ZK Team, i never expected from you

Senthilchettyin ( 2020-10-12 18:26:08 +0800 )edit

Not sure what makes you think that's a change of specs.

MDuchemin ( 2020-10-12 18:43:47 +0800 )edit

First step is finding out why this happens. At the moment, I can't reproduce it either on 8.6 or 9.5.

MDuchemin ( 2020-10-12 18:44:37 +0800 )edit

then if that's linked to a change in the framework it should be apparent

MDuchemin ( 2020-10-12 18:45:30 +0800 )edit

Are you from ZK Team ? Personally we have more than two licenses for each of our customers and

Senthilchettyin ( 2020-10-12 19:01:45 +0800 )edit
0

answered 2020-10-12 18:47:28 +0800

MDuchemin gravatar image MDuchemin
1758 1 5
ZK Team

updated 2020-10-13 10:07:56 +0800

One thing you could try it to set CSS flex to false using library property:

https://www.zkoss.org/wiki/ZKConfigurationReference/zk.xml/TheLibraryProperties/org.zkoss.zul.css.flex

<library-property>
    <name>org.zkoss.zul.css.flex</name>
    <value>false</value>
</library-property>

That's the biggest change related to CSS introduced on ZK 9.0. Since you said your stylesheet wasn't showing this behavior before, it's a quick way to check if that's related or not.

link publish delete flag offensive edit
0

answered 2020-10-13 10:09:28 +0800

MDuchemin gravatar image MDuchemin
1758 1 5
ZK Team

Hi there,

Any update on disabling CSS flex? Since that's the biggest CSS change between versions, it's be a good idea to disable it first to be certain whether it is related or not.

link publish delete flag offensive edit
0

answered 2020-10-13 10:57:46 +0800

Senthilchettyin gravatar image Senthilchettyin flag of India
2625 3 8
http://emrpms.blogspot.in...

Hi

After disabling, It works, but another small issue. Now the screen fields are flickering for a moment. You can check that in this video

link publish delete flag offensive edit
0

answered 2020-10-13 15:55:40 +0800

MDuchemin gravatar image MDuchemin
1758 1 5
ZK Team

Good news!

Now we know why the difference happened in the first place! :) Disabling CSS3 Flex globally in zk.xml with a library property is a stable option, so it's safe to keep it turned off. The new themes are designed with CSS3 Flex in mind, but since your design is based on theme + personal CSS, then there is not difference between that and the previous version's state.

The flicker looks like a flex calculation. I assume disabled css3 flex in zk.xml with library property? Not in zul with a custom-attribute? If you compile the same application on 8.6.0.1, do you see the same resizing? Or is it just on latest release? Since there were a few releases between 8.6 and 9.5, it would be helpful to find out which step introduce that behavior.

8.6.0 -> 8.6.1;

8.6.1 -> 8.6.2;

8.6.2 -> 8.6.3;

8.6.3 -> 8.6.4;

8.6.4 -> 9.0.0;

9.0.0 -> 9.1.0;

9.1.0 -> 9.5.0

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

Follow
2 followers

RSS

Stats

Asked: 2020-10-08 00:14:06 +0800

Seen: 28 times

Last updated: Oct 13

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