-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
when we create a tabbox with many tabs with the tabscroll="false" attribute, if it does not squeeze it's passing to the nextline. So we can see all tabs in our tabbox.
But in the 9 version it is not passing to the nextline so we can not see whole tabs in our tabbox.
We are waiting for your help ,
I also tested it in htt ps: //zkfiddle.o rg with the example,
<zk>
<window border="normal" title="hello" apply="pkg$.TestComposer">
<tabbox height="100%" width="100%" tabscroll="false">
<tabs>
<tab label="Yetki Tanımları" />
<tab label="Program Tanımları" />
<tab label="Program-Yetki Tanımları" />
<tab label="Grup Tanımları" />
<tab label="Grup-Program-Yetki Tanımları" />
<tab label="Grup-Kullanıcıları Tanımları" />
<tab label="Mesaj Tanımları" />
<tab label="Mesaj-Program Tanımları" />
<tab label="Kurum Parametre Tanımları" />
<tab label="Mail Şablon Tanımları" />
<tab label="Sms Şablon Tanımları" />
<tab label="Yetki Tanımları" />
<tab label="Program Tanımları" />
<tab label="Program-Yetki Tanımları" />
<tab label="Grup Tanımları" />
<tab label="Grup-Program-Yetki Tanımları" />
<tab label="Grup-Kullanıcıları Tanımları" />
<tab label="Mesaj Tanımları" />
<tab label="Mesaj-Program Tanımları" />
<tab label="Kurum Parametre Tanımları" />
<tab label="Mail Şablon Tanımları" />
<tab label="Sms Şablon Tanımları" />
</tabs>
<tabpanels>
<tabpanel >
</tabpanel>
<tabpanel >
</tabpanel>
<tabpanel >
</tabpanel>
<tabpanel >
</tabpanel>
<tabpanel >
</tabpanel>
<tabpanel >
</tabpanel>
</tabpanels>
</tabbox>
</window>
</zk>
you can allow wrapping of tabs by CSS styling: e.g.:
.z-tabs.allow-wrap .z-tabs-content {
white-space: normal; /*for classic themes e.g. breeze*/
flex-wrap: wrap; /*for modern themes e.g. iceblue*/
}
and use this style on the <tabs>
element
<tabbox height="100%" width="100%" tabscroll="false">
<tabs sclass="allow-wrap">
...
here a runnable example:
https://zkfiddle.org/sample/9q31gk/1-zk9-wrap-tabbox-tabs
an alternative for 'modern themes' is to display all tabs in a row but truncate the labels using an ellipsis: e.g. "Too Long Lab..."
https://zkfiddle.org/sample/9q31gk/2-zk9-truncate-tabbox-tab-labels
Asked: 2020-07-01 18:57:40 +0800
Seen: 8 times
Last updated: Jul 02 '20
FYI: i increased your karma so you can post links
cor3000 ( 2020-07-02 11:26:35 +0800 )edit