Menu ▾ ▴

#2547 Flex issues in Vlayout/Hlayout

5.0.5
closed-fixed
nobody
Components (1369)
5
2011-04-26
2011-03-23
Anonymous
No

Hi,

I am using ZK CE 5.0.5. I notice that the flex property does not work as expected in Hlayout and Vlayout.

I posted a thread in ZK Help Forum regarding the same. Please see: http://www.zkoss.org/forum/listComment/15641

Thanks,
Sony

Discussion

  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-03-25
    • summary: Flex issues in Vlayout/Hlayout --> Test Cases(See comment): Flex issues in Vlayout/Hlayout
     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-03-25

    This might help you fix the problem. I created a sample code to test different scenarios where flex breaks. For simplicity I refer the hboxes/hlayouts as "Auto Detection 1/2/3 etc." corresponding to the text inside these components. Please see the following cases:

    Case 1: hbox wrapped inside vlayout - flex works (Auto Detection 1)
    Case 2: hlayout wrapped inside vlayout - flex does not work (Auto Detection 2)
    Case 3: Extending case 1: If two hboxes are wrapped inside a vlayout and if both the child hboxes taking up equal space - flex works (Auto Detection 3 and 4)
    Case 4: Extending case 3: If two hboxes are wrapped inside a vlayout and if the space taken by the two child hboxes is unequal by assigning proportional flex values - flex does not work (Auto Detection 5 and 6)

    Please see my testing at : http://top.cs.vt.edu:8080/editionbuilder/src/zul/catalogstest2.zul

    Please find the sample code attached.

     

  • Simon Pai

    Simon Pai - 2011-04-15

    Hi,

    The test cases seem not available for now. Can you test them against 5.0.6 to see how they go? We have fixed quite a few things with flex in the last release version.

    Also, if the issue persists, can you provide zul files (either as attached files or in comment)?

    Regards,
    Simon

     

  • Simon Pai

    Simon Pai - 2011-04-18
    • milestone: --> 5.0.5
    • labels: --> Components
    • status: open --> pending
     

  • Simon Pai

    Simon Pai - 2011-04-18

    We put this ticket as pending, which will be closed if there is no response for a while. Please add a comment to reopen it if anyone has concern. Thanks.

     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-22

    Hi simon,

    Thanks for the follow-up. I tested the flex issues against zk 5.0.6. It appears to me that the issue still persists. Particularly, the hierarchy of the components in my code is vlayout --> hlayout --> div --> html:b etc. The flex works when I use a hbox though. Meaning, flex works for the hierarchy vlayout --> hbox --> div --> html:b.

    Please see my testing at : http://top.cs.vt.edu:8080/editionbuilder/src/zul/catalogstest3.zul

    Also, please see the sample code that I have attached.

    Many Thanks,
    Sony

     

  • Simon Pai

    Simon Pai - 2011-04-22
    • summary: Test Cases(See comment): Flex issues in Vlayout/Hlayout --> Flex issues in Vlayout/Hlayout
    • status: pending --> closed-fixed
     

  • Simon Pai

    Simon Pai - 2011-04-22

    Fixed since 2011/4/22.

    Sony,
    Thanks for providing information.

    Note that in the attached files, Test Case 1 seems to be correct to me. The following is the reduced test case:

    <zk>
    <html><![CDATA[
    <ol>
    <li>All the red and green borders of the Divs should be visible.</li>
    </ol>
    ]]></html>
    <hlayout height="300px">
    <div vflex="2" style="border: 1px solid red">
    Div 1
    </div>
    <div vflex="2" style="border: 1px solid green">
    Div 2
    </div>
    </hlayout>
    <separator />
    <vlayout width="300px">
    <div hflex="2" style="border: 1px solid red">
    Div 1
    </div>
    <div hflex="2" style="border: 1px solid green">
    Div 2
    </div>
    </vlayout>
    </zk>

     

  • sony vijay

    sony vijay - 2011-04-22

    Hi Simon,

    Thank you for the fix. I tested the reduced test case you provided and it works.

    I still notice that the flex overflows in a hlayout.

    See: http://top.cs.vt.edu:8080/editionbuilder/src/zul/flextest2.zul

    Sample code:
    <?xml version="1.0" encoding="UTF-8"?>
    <zk>
    <vlayout>
    <hlayout hflex="1" style="border: 1px solid #000BBB">
    <a href="http://wikipedia.org"> wiki </a>
    Flex does not work here --- Flex does not work here --- Flex does not work here ---
    Flex does not work here --- Flex does not work here --- Flex does not work here ---
    Flex does not work here --- Flex does not work here --- Flex does not work here ---
    Flex does not work here --- Flex does not work here --- Flex does not work here ---
    </hlayout>
    </vlayout>
    </zk>

    I found a work around for this by using a div instead of a hlayout like so:

    See: http://top.cs.vt.edu:8080/editionbuilder/src/zul/flextest3.zul

    Sample Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <zk>
    <vlayout hflex="1" style="border: 1px solid #000BBB">
    <div hflex="1">
    <a href="http://wikipedia.org"> wiki </a>
    Flex works here --- Flex works here --- Flex works here --- Flex works here ---
    Flex works here --- Flex works here --- Flex works here --- Flex works here ---
    Flex works here --- Flex works here --- Flex works here --- Flex works here ---
    Flex works here --- Flex works here --- Flex works here --- Flex works here ---
    </div>
    </vlayout>
    </zk>

    Using a div inside a vlayout to arrange components horizontally is not very intuitive. Is this the only way the code works ?

    Thanks,
    Sony

     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-24
    • status: closed-fixed --> open-fixed
     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-24

    In my previous comment, I meant that the text (not flex) overflows in a hlayout. As an additional note, it would be very nice if there was a way to edit comments to edit typos etc.

     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-24

    Hi,

    A reduced test case of the text resizing issue in hlayout is shown below:

    <zk>
    <vlayout hflex="1" style="border: 1px solid">
    Configure the catalogs and databases that are included in your edition.
    LibX can try to auto-detect your catalog. It will also cross-check
    other editions to see if a particular catalog has already been configured.
    To change the order in which catalogs appear in your edition,
    drag and drop each catalog's entry in the desired position.
    </vlayout>
    <separator />
    <hlayout hflex="1" style="border: 1px solid">
    Configure the catalogs and databases that are included in your edition.
    LibX can try to auto-detect your catalog. It will also cross-check
    other editions to see if a particular catalog has already been configured.
    To change the order in which catalogs appear in your edition,
    drag and drop each catalog's entry in the desired position.
    </hlayout>
    </zk>

    Please see my testing at: http://top.cs.vt.edu:8080/editionbuilder/src/zul/flextest4.zul

    Please notice that in the vlayout the entire text is visible whereas the text is cut-off in the hlayout. This restricts the use of hlayout hugely.

    Thanks,
    Sony

     

  • Simon Pai

    Simon Pai - 2011-04-25

    Sony,

    Thanks for your response. Hlayout and Vlayout are meant to cut overflow content for precise size control. However, you can override CSS to change these behavior:

    <zk>
    <style>
    .z-hlayout {
    overflow: auto; /* enable scrollbar */
    white-space: normal; /* make text to wrap */
    }
    </style>
    <hlayout width="200px" style="border: 1px solid green">
    long long long long long long long long long long long long text
    </hlayout>
    </zk>

     

  • Simon Pai

    Simon Pai - 2011-04-25
    • status: open-fixed --> closed-fixed
     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-25
    • status: closed-fixed --> open-fixed
     

  • Simon Pai

    Simon Pai - 2011-04-25
    • status: open-fixed --> closed-fixed
     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-25

    Hi Simon,

    Overriding the CSS behavior works in Chrome browser. However, the layout breaks in Mozilla 4.0 and IE 9.

    Please see my testing at : http://top.cs.vt.edu:8080/editionbuilder/src/zul/mozillatest3.zul

    You may notice that the children of hlayout are aligned vertically as against horizontally in Mozilla and IE.

    <zk>
    <style>
    .z-hlayout {
    overflow: auto; /* enable scrollbar */
    white-space: normal; /* make text to wrap */
    }

    .z-hlayout-inner {
    vertical-align: top;
    }
    </style>
    <vlayout hflex="1" style="border: 1px solid">
    <hlayout hflex="1">
    <hlayout hflex="2">
    <vlayout hflex="1" style="border: 1px solid">
    <label>Label 1</label>
    <label>Label 2</label>
    </vlayout>
    </hlayout>
    <separator orient="vertical" />
    <hlayout hflex="7">
    <vlayout hflex="1" style="border: 1px solid">
    <label>Label 3</label>
    <label>Label 4</label>
    </vlayout>
    </hlayout>
    </hlayout>
    </vlayout>
    </zk>

    When I remove the style in the above sample code, the children of hlayout are aligned horizontally in both the browsers as expected. But, I do need to override the CSS for my application. Is there a work around to get this work in Mozilla and IE ?

    Thanks,
    Sony

     
  • Comment has been marked as spam. 
    Undo

    View and moderate all "bugs Discussion" comments posted by this user

    Mark all as spam, and block user from posting to "Bugs"

    Anonymous

    Anonymous - 2011-04-25
    • status: closed-fixed --> open-fixed
     

  • Simon Pai

    Simon Pai - 2011-04-26

    Sony,

    The issue about CSS has deviated from the topic of this bug. Maybe you can talk about it in the forum? Thanks.

     

  • Simon Pai

    Simon Pai - 2011-04-26
    • status: open-fixed --> closed-fixed
     

Log in to post a comment.

MongoDB Logo MongoDB