1. #1
    Ext JS Premium Member
    Join Date
    Oct 2011
    Vote Rating
    larf311 is on a distinguished road


    Default SASS theming breaks tab layout (4.1 Beta 2)

    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
    larf311 is on a distinguished road



    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi