1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    1
    Vote Rating
    0
    gwhn is on a distinguished road

      0  

    Default Whitespace below panel top dock area with app css compiled by compass

    Whitespace below panel top dock area with app css compiled by compass


    Hello. I'm just starting out with extjs 4.0.2a. I've set up my environment to use pre versions of compass, sass and haml gems, and copied and configured the templates to successfully compile my apps css. When I point from ext-all.css to my app's css, whitespace below each panel's top dock area appears unexpectedly. Has anyone else come across this and know how to fix it?

    Here's a before and after:
    Screen shot 2011-06-27 at 19.21.13.png

    Screen shot 2011-06-27 at 19.24.04.png

    UPDATE
    I did a diff on the css files, and apart from the order and paths, there wasn't anything missing other than this:
    Code:
    .x-form-file-wrap .x-form-text {
        color: #777777;
    }
    .x-form-file-wrap .x-form-file-btn {
        float: left;
        overflow: hidden;
    }
    .x-form-file-wrap .x-form-file-input {
        font-size: 100px;
        height: 30px;
        opacity: 0;
        position: absolute;
        right: -2px;
        top: -4px;
    }
    Which didn't seem relevant, so I just set $include_default: true; and removed lines 10-38 as instructed.

    A bit more investigation pointed to the omission of @include extjs-layout in the app.scss template, so I've set $include_default: false and ordered the includes the same as in _all.scss
    Code:
    @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; // missing from template
        @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;
    
    /**
     * missing from template
     */
    @include extjs-dragdrop;
    @include extjs-resizable;
    @include extjs-splitter;
    @include extjs-layout; // missing this caused the gap
    @include extjs-tool;
    @include extjs-scroller;
    
    @include extjs-html;
    Last edited by gwhn; 27 Jun 2011 at 1:01 PM. Reason: Fix

Tags for this Thread