Announcement

**Isomorphic** · 29 Oct 2012, 10:21

The styles have indeed been changed - the lack of bold styling for selected tabs was a deliberate change implemented in order to prevent the size of tabs changing on select/deselect due to the titles' rendered size increasing/decreasing.
If you want bold styling on selection this is easy to customize in your skin/theme.

The white border on the right hand side looks like a visual glitch due to overlapping tabs, perhaps.
We're not seeing this in our tests - if you can can show us a simple entryPoint class where the problem is visible we'll take a look. Also please be sure to state what skin you're seeing the problem in and whether you have a doctype specification in your html file.

Thanks
Isomorphic Software

**shortpasta** · 30 Oct 2012, 16:54

Using SmartGWT 3.1d:
SmartClient Version: v8.3d_2012-10-30/LGPL Development Only (built 2012-10-30)
Reproducible with both FF 6.0.2 and IE 9

Doctype:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Skin:
I am only inheriting these, so I guess I am using the default?

Code:

  <!-- Inherit SmartGwt components                                -->
  <inherits name="com.smartgwt.SmartGwt"/>>
  
  <!-- inherit smartGwt debug console -->
  <inherits name="com.smartgwt.tools.SmartGwtTools"/>

Sample test case:

Code:

import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.tab.Tab;
import com.smartgwt.client.widgets.tab.TabSet;

public class TabBorderOverlap implements EntryPoint {

  /**
   * The EntryPoint interface
   * http://forums.smartclient.com/showthread.php?p=94385
   */
  public void onModuleLoad() {

    // tab set
    final TabSet tabSet = new TabSet ();
    tabSet.setTabBarThickness (23);
    tabSet.setWidth100 ();
    tabSet.setHeight100 ();
    
    // add a tab
    final Tab tab1 = new Tab ("Welcome");
    tab1.setPane (new Canvas ());
    tab1.setIcon ("/images/icon/welcome.png");
    tabSet.addTab (tab1);
    
    // add another tab
    final Tab tab2 = new Tab ("Computer");
    tab2.setPane (new Canvas ());
    tab2.setIcon ("/images/icon/computer.png");
    tabSet.addTab (tab2);
    
    // layout
    tabSet.show ();
  }
}

See the attached tabBorderOverlap2.png.
This is what happens:
1. The page renders and the tabs look OK
2. I place the mouse on the Computer tab, and the computer tab shrinks
3. I click themouse on the Computer tab, and the Welcome tab shrinks
4. If I use 8x8 icons instead of 16x16 icons, I do not see the problem

Attached Files

**Isomorphic** · 7 Nov 2012, 14:15

We have made a change to make the selected title style include the blue color by default as we agree that it is clearer. Note that depending on your server settings you may need to clear the browser cache when reloading the page to pick up the new stylesheet.

On the icon - we never reproduced the overlapping-tabs effect but we did see the basic problem where rollover etc would cause the tabs to shrink in size.
The problem actually only occurs on first load, or after a "shift-reload" - not on a normal reload. The reason is that the browser is unaware of the media size initially so when the title + image is rendered out the wrong amount of space is allocated, then on style change due to rollOver etc, the rendered size changes.

You can fix this by setting and explicit iconSize on your tab (or closeIconSize on your tabset).

**shortpasta** · 12 Nov 2012, 15:41

Confirmed.
Adding this makes the problem go away:

Code:

tab1.setIconSize (16);

Announcement

Tab border and style change

Comment

Comment

Comment

Comment