0

Problem with zoom in a vertical tabbox

asked 2014-01-15 19:23:32 +0800

alexeykrivenia gravatar image alexeykrivenia
3 1

updated 2014-01-15 19:24:16 +0800

Hello.

When anybody will fix bug "Problem with zoom in a vertical tabbox" (bug# ZK-1828 in your tacker)?

delete flag offensive retag edit

Comments

Hello, Robert. Thank you very match. This CSS is helpful. (Sorry, I am unable to reply to your message.)

alexeykrivenia ( 2014-01-16 09:02:35 +0800 )edit

1 Answer

Sort by ยป oldest newest most voted
1

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

cor3000 gravatar image cor3000
4596 2 7
ZK Team

updated 2014-01-16 02:57:58 +0800

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 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

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
1 follower

RSS

Stats

Asked: 2014-01-15 19:23:32 +0800

Seen: 21 times

Last updated: Jan 16 '14

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