Reduce tab width to not show scroll like firefox does

asked 2013-02-08 12:47:02 +0800

Neus gravatar image Neus
1415 14

updated 2013-02-18 07:59:48 +0800

Hi, I am implementing a tabbox where tabs are created dynamically. If there are a lot of Tabs the default behaviour is to show an scroll button to allow you navigate throw all of them.

Is there the possibilty to change this behaviour and do something like browsers do? To explain it better...When you open a lot of tabs in Firefox their width are reduced to make all of them visible at first sight. When a minimum width is reached then it starts to scroll.

I would like to reproduce this behaviour and I don't know if ZK gives you the chance to do it or if it exists an easy implementation. Any idea about how to do it? Could anyone help me?

Thank you

delete flag offensive retag edit

1 Answer

Sort by » oldest newest most voted

answered 2013-02-18 10:15:54 +0800

cvarona gravatar image cvarona
554 1 6

updated 2013-02-18 10:18:13 +0800

I don't think you can accomplish this automatically; if you know the room available for your tabs you can set a reasonable width on every tab as they get opened, and enable or disable the tab scrolling (Tabbox#setTabscroll( boolean ) ) as the product of the tab count and the tab width changes:

<window title="My First Window" border="normal" width="600px">
    import org.zkoss.zk.ui.event.*;

    public void newTab() {

        int tw = tabWidth.getValue();

        Tab tab = new Tab( newTabTitle.getValue() );
        tab.addEventListener( "onClose", new OnClose() );
        tab.setClosable( true );
        tab.setWidth( String.valueOf( tw ) + "px" );
        tabbox.getTabs().appendChild( tab );

        int tabCount = tabbox.getTabs().getChildren().size() + 1;

        tabbox.setTabscroll( tabCount * tabWidth.getValue() > tabboxWidth.getValue() );        
        tabbox.setWidth( String.valueOf( tabboxWidth.getValue() ) + "px" );
        tabboxScrolling.setChecked( tabbox.isTabscroll() );

        Tabpanel tabpanel = new Tabpanel();
        new Label( "This is tabpanel #" + tabCount  ).setParent( tabpanel );                
        tabbox.getTabpanels().appendChild( tabpanel );

    public void tabboxWidthChanged( ) {    
        int tabCount = tabbox.getTabs().getChildren().size();
        tabbox.setTabscroll( tabCount * tabWidth.getValue() > tabboxWidth.getValue() );        
        tabbox.setWidth( String.valueOf( tabboxWidth.getValue() ) + "px" );
        tabboxScrolling.setChecked( tabbox.isTabscroll() );

    public void tabWidthChanged( ) {

        int tabCount = tabbox.getTabs().getChildren().size();

        int tw = tabWidth.getValue();
        tabbox.setTabscroll( tabCount * tw > tabboxWidth.getValue() );
        tabboxScrolling.setChecked( tabbox.isTabscroll() );

        for( Object o: tabbox.getTabs().getChildren() ) {
            ( ( Tab ) o ).setWidth( String.valueOf( tw ) + "px" ); 

    public class OnClose implements EventListener {
        public void onEvent( Event event ) {
        <label value="Tabbox width" />
        <spinner id="tabboxWidth" value="550" constraint="no empty,min 300 max 600" onChange="tabboxWidthChanged();" />
        <label value="Tab width" />
        <spinner id="tabWidth" constraint="no empty,min 60 max 90" value="65" onChange="tabWidthChanged();" />
        <label value="New tab title" />
        <textbox id="newTabTitle" value="012345 012345 012345" constraint="no empty" />
        <button label="New tab" onClick="newTab();" />
        <checkbox id="tabboxScrolling" label="Tabbox scrolling" disabled="true" />       
    <tabbox id="tabbox" width="550px">
        <tabs />
        <tabpanels />

In this example the width assigned to the tabs as they are opened and closed is fixed, but you could assign greater widths as the number of tabs decreases and vice-versa.

This is a brute-force approach; if you could modifiy the component's css in order to achieve this effect it would be much more elegant.

With kind regards

César Varona

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

1 follower



Asked: 2013-02-08 12:47:02 +0800

Seen: 18 times

Last updated: Feb 18 '13

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