Ext JS Premium Member
SASS theming breaks tab layout (4.1 Beta 2)
When generating CSS from SASS, the body of the tabs gets offset by 23px from the bottom of the tabbar. See screenshots of the themes.js app below (notice that in the second one the body appears detached from the tabs).
I tracked the problem down to the fact that some CSS classes are being generated in a different order than in the ext-all.css. Specifically, .x-docked and .x-tab-bar. The issue is that .x-tab-bar has sets the position to be relative while .x-docked set it to be absolute. When .x-tab-bar incorrectly appears first in the generated CSS, it takes priority over .x-docked and hence the absolute positioning of the body will be offset from the tabs instead of from the panel surrounding them.There are many ways to solve the issue. One is to make sure the classes get generated in the right order. Another is to have a more specific CSS selector for the tab body on which you apply the absolute positioning so order won't matter.
SASS generated CSS with no changes:
Tags for this Thread