-
FEATURED COMPONENTS
First time here? Check out the FAQ!
1 | initial version | |
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
2 | No.2 Revision |
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