Announcement

**Isomorphic** · 16 Sep 2013, 16:01

Can you try supplying a non-visible border to the non-selected state, and thus ensuring the borders are the same size in all states?
In other words - .testTop would have a 1px border that matches the bg-color, or is transparent.
If that doesn't fix it, let us know and we'll take a look.

Oh also - when you say SmartGWT power 4 - we assume you mean 4.0p, correct?
Can you also confirm which version of IE you're using, and what DOCTYPE you have set for your bootstrap page?

Thanks

**tgilbert** · 17 Sep 2013, 01:37

Thanks for your suggestion.
Unfortunately it does not work... Actually, I think that the problem comes from the fact that the CSS class name is added not only to the tab's TD element, but also to all its descendant (canClose is true, so SmartGWT renders a table inside the tab to add the icon), as you can see in the attached screenshot.

And eventually:
- Yes I'm using 4.0p :-)
- Can be replicated in IE10, IE9 and IE8
- doctype: <!doctype html>

Thanks,
Thomas

Attached Files

**Isomorphic** · 18 Sep 2013, 15:40

We must be missing something here as we're not reproducing the problem.
Could you create a small test case that demonstrates the problem (simply an entrypoint class which onModuleLoad creates and draws a TabSet should do it), and show us
- the EntryPoint class
- the bootstrap HTML file (including the CSS)
- the .gwt.xml file used to load it

Thanks

**beckyo** · 31 Dec 2013, 15:23

Experiencing the same issue

Hi team here's an attempt at a test case.
I'm using SmartGWT 4.1d 11/7/2013.

The test case to reproduce involves creating a tab set with tabs along the top (bottom tabs look fine - haven't tried left/right), applying borders to the CSS classes tabBarTop/tabBarLeft/tabBarRight, setting setUseSimpleTabs, and compiling output for IE.

We used custom tab bar properties in load_skin to override defaults, and although I don't think it's affecting things, I'm including our load_skin snippet here as well to be sure you are getting a complete picture.

Also I should note that the extra inline CSS styles that are overriding things in IE only exist in the output of the IE-compiled version of the code. You won't find those inline styles if viewing a FF compiled copy in FF.

load_skin snippet:

Code:

isc.defineClass("TabSetWorkbook", TabSet);
    
if (isc.TabSetWorkbook) 
{
        isc.TabSetWorkbook.addProperties
        ({
            showEdges: true,
            paneContainerClassName: "tabSetWorkbookContainer",
            //how high to make the tab bar
            tabBarThickness: 24,
            //how high to make the tabs in the tab bar
            defaultTabHeight: 24
        });
        
        isc.TabBar.addProperties
        ({
            //distance between tabs
            membersMargin: 6,
            //left/right (or top/bottom depending on layout) tab distance from edge
            layoutStartMargin: 8,
            layoutEndMargin: 8,
        	
            styleName:"tabBarWorkbook",	
            leftStyleName:"tabBarWorkbookLeft", //declared but not using in css
            topStyleName:"tabBarWorkbookTop",	//ETL Ribbon Bar tabs
            rightStyleName:"tabBarWorkbookRight", //not using
            bottomStyleName:"tabBarWorkbookBottom",  
            baseLineConstructor:"Canvas",

            baseLineProperties: 
            {
            	styleName: "tabBarWorkbookBaseline",
                overflow: "hidden",
                height: 5
            },
			
	    baseLineSrc: "[SKIN]baseline.png",
    	    baseLineThickness: 1,
    	    baseLineCapSize: 4
        });
}

CSS:

Code:

/* Area tabs sit on top of */
.tabBarWorkbookTop 
{
  background-color: #ffffff;
}

/* 
 * Styles applied to ALL top tab states - over/hover, selected, focused, etc...
 */
[class^="tabWorkbookTop"] 
{
  font-family: open_sanssemibold,serif;
  font-size: 12px;
  background-color: #cccccc;
  border-left: 1px solid #cccccc;
  border-top: 1px solid #cccccc;
  border-right: 1px solid #cccccc;
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
}

.tabWorkbookTopOver,
.tabWorkbookTopDown,
.tabWorkbookTopFocused,
.tabWorkbookTopFocusedDown,
.tabWorkbookTopSelected,
.tabWorkbookTopSelectedOver,
.tabWorkbookTopSelectedDown,
.tabWorkbookTopSelectedFocused,
.tabWorkbookTopSelectedFocusedOver,
.tabWorkbookTopSelectedFocusedDown 
{
  background-color: #fbfbfb;
}

/* Line that separates tabs from tab body/content.  
 * It's a pixel high, so border top is enough. */
.tabBarWorkbookBaseline 
{
  border-top: 1px solid #cccccc;
}

/* Body/content section of each tab. */
.tabSetWorkbookContainer 
{
  background-color: #fbfbfb;
  /* Apply borders all around, but know that tab bars will slightly overlay whichever border they're applied to. 
   * This is intentional so selected tabs don't have a line through their bottom. */
  border: 1px solid #cccccc;
}

Java:

Code:

TabSet tabs = new TabSet();
Tab testTab = new Tab("test");

tabs.setScClassName("TabSetWorkbook"); 
tabs.addTab(testTab);

tabs.setTabBarPosition(Side.TOP);  
tabs.setWidth100();
tabs.setHeight(105);
tabs.setUseSimpleTabs(true);
tabs.setSimpleTabBaseStyle("tabWorkbook");

addMember(tabs);

And in our gwt.xml...I happen to compile for both FF and all flavors of IE, but I believe ie9 gives you support for 10 and 11.

Code:

<set-property name="user.agent" value="gecko1_8,ie6,ie8,ie9"/>

Put it all together and hopefully you can reproduce!!

**beckyo** · 31 Dec 2013, 15:32

Suggestion for solution

By the way if I could suggest a solution it would be twofold.
1) Eliminate the inline generated styles specific to IE. I don't think they're necessary. When I shut them off in IE things look good.
2) Apply the tab style name (in my example above tabWorkbookBottom) to the tab's outer <td> only - not to any inner tables/td elements that get created when users apply settings such as allowing the tab to be closed, or allowing title edits.

**beckyo** · 31 Dec 2013, 17:01

Workaround for tgilbert

tgilbert, by the way I worked around the issue by adding !important (as you suggested earlier), which then of course applies those borders to sub-objects of the same class name, so I added a small CSS hack that matches this CSS class name with children of the same name.

For example, setSimpleTabBaseStyle("tabWorkbook") and in this case the tabs are on the bottom:

Code:

[class^="tabWorkbookBottom"]
{
  border-left: 1px solid #cccccc !important;
  border-bottom: 1px solid #cccccc !important;
  border-right: 1px solid #cccccc !important;
}

/* Unwanted child elements with the same CSS class name */
[class^="tabWorkbookBottom"] [class^="tabWorkbookBottom"]
{
  border-left: none   !important;
  border-bottom: none  !important;
  border-right: none  !important;
}

**Isomorphic** · 7 Jan 2014, 11:16

We've made a change to the 4.1d branch to get this particular case working for you, and clarify some limitations for CSS features.
To quote the updated "skinning" documentation:

In most cases, using newer CSS features such as CSS3 prefix attribute selectors or CSS3 pseudo-classes in a skin will just work, provided the browser supports those CSS features. However, in some cases, SmartClient needs to be able to extract style information from CSS style declarations. For this reason, only single class name selectors are officially supported (e.g. .myButton, .myButtonDown) and @-rules are not supported.

Regards
Isomorphic Software

**beckyo** · 7 Jan 2014, 15:09

Thanks guys

By the way is the fix you made in 4.1d to not cascade the CSS class name down to the child <td> elements?
Or was it to remove the IE-specific inline/element CSS that necessitated the use of !important in our CSS file because it was hiding those borders?

I think with either fix we could do away with the CSS3 hack.

Announcement

IE Simple Tabs borders

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment