Revision history [back]

click to hide/show revision 1
initial version

answered 2014-01-16 02:39:40 +0800

cor3000 gravatar image cor3000

In a simplified form this kind of problem can be reproduced like this (reproduced in chrome and FF):

<html>
    <style>
        .outer {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 50px;
            height: 150px;
            background-color: red;
            overflow: hidden;
            display: inline-block;
        }
        .content {
            border: 1px solid blue;
            width: 248px;
            height: 150px;
            background-color: green;
            overflow: hidden;
        }

        .outer-fix {
            position: relative;
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .left-fix {
            position: absolute;
            width: 50px;
            height: 150px;
            background-color: red;
            overflow: hidden;
            display: inline-block;
        }
        .content-fix {
            position: absolute;
            right: 0px;
            border: 1px solid blue;
            width: 248px;
            height: 150px;
            background-color: green;
            overflow: hidden;
        }
    </style>
    <body>
        <div class="outer">
            <div class="left">
            </div>
            <div class="content">
            </div>
        </div>

        <div class="outer-fix">
            <div class="left-fix">
            </div>
            <div class="content-fix">
            </div>
        </div>

    </body>
</html>

The upper box shows, this problem is that borders seem be calculated incorrectly when zooming is involved - causing a line wrap.

The lower box uses slightly different css styles and seems to fix the wrapping at the cost of a 1px gap appearing sometimes beween the left and content div.

For ZK 6.5 based applications a workaround could look like this (not sure if this causes additional layout side effects)

<zk>
    <style>
        .z-tabbox-ver {
            position: relative;
        }
        .z-tabbox-ver .z-tabs-ver {
            float: none;
            position: absolute;
        }
        .z-tabbox-ver .z-tabpanels-ver {
            position: absolute;
            right: 0px;
        }
    </style>

    <window border="normal" title="hello" hflex="1">
        <tabbox id="tb" height="300px" 
            orient="vertical" >
            <tabs id="tabs">
                <tab id="A" label="Tab A" />
                <tab id="B" label="Tab B" />
                <tab id="C" label="Tab C" />
                <tab id="D" label="Tab D" />
                <tab id="E" label="Tab E" />
            </tabs>
            <tabpanels>
                <tabpanel>This is panel A</tabpanel>
                <tabpanel>This is panel B</tabpanel>
                <tabpanel>This is panel C</tabpanel>
                <tabpanel>This is panel D</tabpanel>
                <tabpanel>This is panel E</tabpanel>
            </tabpanels>
        </tabbox>
    </window>
</zk>

So please let me know if this is helpful.

Regards,

Robert

In a simplified form this kind of problem can be reproduced like this (reproduced in chrome and FF):

<html>
    <style>
        .outer {
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .left {
            float: left;
            width: 50px;
            height: 150px;
            background-color: red;
            overflow: hidden;
            display: inline-block;
        }
        .content {
            border: 1px solid blue;
            width: 248px;
            height: 150px;
            background-color: green;
            overflow: hidden;
        }

        .outer-fix {
            position: relative;
            border: 1px solid black;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .left-fix {
            position: absolute;
            width: 50px;
            height: 150px;
            background-color: red;
            overflow: hidden;
            display: inline-block;
        }
        .content-fix {
            position: absolute;
            right: 0px;
            border: 1px solid blue;
            width: 248px;
            height: 150px;
            background-color: green;
            overflow: hidden;
        }
    </style>
    <body>
        <div class="outer">
            <div class="left">
            </div>
            <div class="content">
            </div>
        </div>

        <div class="outer-fix">
            <div class="left-fix">
            </div>
            <div class="content-fix">
            </div>
        </div>

    </body>
</html>

The upper box shows, this problem is that borders seem to be calculated incorrectly when zooming is involved - causing a line wrap.

The lower box uses slightly different css styles and seems to fix avoiding the wrapping at the cost of a 1px gap appearing sometimes beween the left and content div.

For ZK 6.5 based applications a workaround could look like this (not sure if this causes additional layout side effects)

<zk>
    <style>
        .z-tabbox-ver {
            position: relative;
        }
        .z-tabbox-ver .z-tabs-ver {
            float: none;
            position: absolute;
        }
        .z-tabbox-ver .z-tabpanels-ver {
            position: absolute;
            right: 0px;
        }
    </style>

    <window border="normal" title="hello" hflex="1">
        <tabbox id="tb" height="300px" 
            orient="vertical" >
            <tabs id="tabs">
                <tab id="A" label="Tab A" />
                <tab id="B" label="Tab B" />
                <tab id="C" label="Tab C" />
                <tab id="D" label="Tab D" />
                <tab id="E" label="Tab E" />
            </tabs>
            <tabpanels>
                <tabpanel>This is panel A</tabpanel>
                <tabpanel>This is panel B</tabpanel>
                <tabpanel>This is panel C</tabpanel>
                <tabpanel>This is panel D</tabpanel>
                <tabpanel>This is panel E</tabpanel>
            </tabpanels>
        </tabbox>
    </window>
</zk>

So please let me know if this is helpful.

Regards,

Robert

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