Reduce tab width to not show scroll like firefox does

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

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">
    <zscript>
    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 ) {
            tabboxWidthChanged();
        }
    }    
    </zscript>
    <hlayout>
        <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();" />
    </hlayout>
    <hlayout>
        <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" />       
    </hlayout>
    <tabbox id="tabbox" width="550px">
        <tabs />
        <tabpanels />
    </tabbox>
</window>

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