Here are my two TabPanels, one is rendered correctly, the other isn't.
Renders Correctly
Code:
Ext.define('APP.view.links.RightTabs', {
extend: 'Ext.TabPanel',
config: {
tabBar: {
docked: 'top',
layout: {
pack: 'center'
}
},
ui: 'dark',
cardSwitchAnimation: {
type: 'slide'
},
items: [{
title: 'Right Color 1',
xtype : 'panel'
},{
title: 'Right Color 2',
xtype : 'panel'
},{
title: 'Right Color 3',
xtype : 'panel'
}]
}
});
Renders Incorrectly
Code:
Ext.define('APP.view.content.WrongTabs', {
extend: 'Ext.TabPanel',
xtype : 'contenWrongTabs',
config: {
tabBar: {
docked: 'top',
layout: {
pack: 'center'
}
},
ui: 'dark',
cardSwitchAnimation: {
type: 'slide'
},
items: [{
xtype: 'panel',
title: 'Wrong Color 1'
},{
xtype: 'panel',
title: 'Wrong Color 2'
},{
xtype: 'panel',
title: 'Wrong Color 3'
}]
}
});
I have also attached a screenshot so you can see what's happening.
sencha-css-tabs.png
Here is the CSS that is rendered when I open the Chrome Developer Tools & highlight the 'span' tag that holds the text for a tab in each of the TabPanel(s). IE: Both TabPanel(s) are using the exact same CSS:
Code:
element.style {
}
Matched CSS Rules
.x-tabbar.x-docked-top .x-button-label, .x-tabbar.x-docked-top .x-hasbadge .x-badge, .x-hasbadge .x-tabbar.x-docked-top .x-badge {
font-size: .8em;
line-height: 1.2em;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.x-button-label, .x-hasbadge .x-badge {
-webkit-box-flex: 1;
box-flex: 1; #THIS HAS A STRIKETHROUGH
-webkit-box-align: center;
box-align: center; #THIS HAS A STRIKETHROUGH
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
font-weight: bold;
line-height: 1.2em; #THIS HAS A STRIKETHROUGH
display: block;
overflow: hidden;
}
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Pseudo ::before element
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Pseudo ::after element
*, ::after, ::before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none; #THIS HAS A STRIKETHROUGH
-webkit-user-drag: none;
}
Inherited from div#ext-tab-4.x-tab.x-tab-normal.x-tab-active
.x-tabbar-dark.x-docked-top .x-tab-active {
color: white;
}
.x-tabbar-dark .x-tab-active {
color: white;
}
.x-tabbar-dark .x-tab {
color: rgb(90, 129, 175);
}
Inherited from body#ext-element-2.x-desktop.x-windows.x-chrome.x-landscape
body.x-desktop {
font-size: 114%;
}
body {
font-size: 104%;
}
html, body {
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-weight: normal;
}
Inherited from html
html, body {
font-family: "Helvetica Neue", HelveticaNeue, "Helvetica-Neue", Helvetica, "BBAlpha Sans", sans-serif;
font-weight: normal;
}
The funny thing is, when I uncheck the text-rendering: optimizeLegibility in the Developer Tools in Chrome, the colors look correct on the TabPanel that is too dark. Is this a bug? Anything special I need to do to fix this?
I will also note that I did a search in the entire project for this string
ui:
And made sure they were all set to ui: 'dark', in case of something weird. But that is also why I clicked on each button down to the <span> tag that contained the text label for each tab and compared the CSS line by line. It's so strange.