Results 1 to 2 of 2

Thread: SASS theming breaks tab layout (4.1 Beta 2)

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2011
    Vote Rating

    Default 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:

  2. #2
    Ext JS Premium Member
    Join Date
    Oct 2011
    Vote Rating


    A little extra research shows that the ordering issue only occurs when setting $include-default: false. The reason lies here in the _all.scss:

    @else {
    @if $include-default {
    @include extjs-boundlist;
    @include extjs-button;
    @include extjs-btn-group;
    @include extjs-datepicker;
    @include extjs-colorpicker;
    @include extjs-menu;
    @include extjs-grid;
    @include extjs-form;
    @include extjs-form-field;
    @include extjs-form-fieldset;
    @include extjs-form-file;
    @include extjs-form-checkboxfield;
    @include extjs-form-checkboxgroup;
    @include extjs-form-triggerfield;
    @include extjs-form-htmleditor;
    @include extjs-panel;
    @include extjs-qtip;
    @include extjs-slider;
    @include extjs-progress;
    @include extjs-toolbar;
    @include extjs-window;
    @include extjs-messagebox;
    @include extjs-tabbar;
    @include extjs-tab;
    @include extjs-tree;
    @include extjs-drawcomponent;
    @include extjs-viewport;

    @include extjs-dragdrop;
    @include extjs-resizable;
    @include extjs-splitter;
    @include extjs-layout;
    @include extjs-tool;
    @include extjs-scroller;

    @include extjs-html;

    Then when specifically including files in your own scss file, they must occur after extjs-layout since importing 'ext4/default/all' includes extjs-layout.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts