0

Problem with tabbox in 9 version

asked 2020-07-01 18:57:40 +0800

TARSIM gravatar image TARSIM
31

updated 2020-07-02 11:25:02 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

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>
delete flag offensive retag edit

Comments

FYI: i increased your karma so you can post links

cor3000 ( 2020-07-02 11:26:35 +0800 )edit

1 Answer

Sort by » oldest newest most voted
0

answered 2020-07-02 11:36:46 +0800

cor3000 gravatar image cor3000
5262 2 7
ZK Team

updated 2020-07-02 11:50:18 +0800

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

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: 2020-07-01 18:57:40 +0800

Seen: 8 times

Last updated: Jul 02

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