Search code examples
smartgwt

smartGWT: How to increase the TabPanel Header's Width


I have created a tabPanel in smartGWT, Attached is the screenshot I am trying to increase my tab headers width or to make my header name place vertically so that the names "company information " and "relations" can be visible in one line

I have use this widget

            http://www.smartclient.com/smartgwt/showcase/#layout_tabs_orientation 

Any idea how can i increase my tab header's width or to make the headers title type vertically

thanks enter image description here


Solution

  • For controlling the tabs' thickness(i.e. width) use:

    tabset.setTabBarThickness(int tabBarThickness);
    

    For showing the text with vertical orientation, you can use css to control the style of the text used as title for the tab. So something like the following shall suffice:

    tab.setTitle("My Tab");
    tab.setTitleStyle("tab-text");
    

    And in the application's css:

    .vtab-text, .vtab-textSelected, .vtab-textSelectedOver {
        -moz-transform: rotate(90.0deg);  /* FF3.5+ */
        -o-transform: rotate(90.0deg);  /* Opera 10.5 */
        -webkit-transform: rotate(90.0deg);  /* Saf3.1+, Chrome */
        filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=90deg);  /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=90)"; /* IE8 */
        color: green;
     }