Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    24
    Vote Rating
    0
    pherris is on a distinguished road

      0  

    Default CSS applying differently after Cmd production build

    CSS applying differently after Cmd production build


    I am getting two different looks from my HTML/CSS when running from my raw source vs after building for production (sencha app build production). I am using Cmd v3.0.0.250, Sencha Touch 2.1 with sencha-SlideNavigation and mitchellsimoens/Ext.ux.touch.grid. I've carefully examined the HTML and CSS - they seem to be close, but not the same - note how the .touchgridpanel is after other CSS after the build (from Chrome, selected the div with the number 457 in it and copied the style info here)... I am testing on Chrome from my Windows 7 machine which is also serving the content via apache.

    In Developer Mode After building (prod mode)
    element.style {
    • font-size: 0.7em;
    • padding-left: 0.8em;
    • width: 15%;
    }

    Matched CSS Rules


    .touchgridpanel .x-grid-cell:first-child {
    • border-left: none;
    }



    .touchgridpanel .x-grid-cell {
    • display: inline-block;
    • overflow: hidden;
    • text-overflow: ellipsis;
    • white-space: nowrap;
    • vertical-align: middle;
    • line-height: 2em;
    • font-size: 1em;
    • font-weight: bold;
    • border-left: 1px solid #ccc;
    }



    body, div, dl, dt, dd, ul,ol, li, h1, h2, h3, h4, h5, h6, pre,code, form, fieldset, legend, input,textarea, p, blockquote, th, td {
    • margin: 0;
    • padding: 0;
    }



    *, ::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;
    • -webkit-user-drag: none;
    }


    user agent stylesheet
    div {
    • display: block;
    }

    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;
    • -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;
    • -webkit-user-drag: none;
    }

    Inherited from div#ext-component-59.x-unsized.x-list-item-body


    .touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body {
    • font-size: 100%;
    }

    Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap


    .x-list .x-list-item {
    • color: #000;
    }

    Inherited from body#ext-element-3.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;
    }



    body {
    • color: red;
    }

    Inherited from html


    html, body {
    • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
    • font-weight: normal;
    }












    element.style {
    • font-size: 0.7em;
    • padding-left: 0.8em;
    • width: 15%;
    }

    Matched CSS Rules


    body, div, dl, dt,dd, ul, ol, li, h1, h2, h3, h4, h5,h6, pre, code, form, fieldset,legend, input, textarea, p,blockquote, th, td {
    • margin: 0;
    • padding: 0;
    }



    *, ::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;
    • -webkit-user-drag: none;
    }


    user agent stylesheet
    div {
    • display: block;
    }

    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;
    • -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;
    • -webkit-user-drag: none;
    }

    Inherited from div#ext-component-59.x-unsized.x-list-item-body


    .touchgridpanel.x-list .x-list-item .x-list-item-label, .touchgridpanel .x-list-item-body {
    • font-size: 100%;
    }

    Inherited from div#ext-listitem-19.x-container.x-list-item.x-stretched.x-touchgrid-item.x-list-item-first.x-list-header-wrap


    .x-list .x-list-item {
    • color: #000;
    }

    Inherited from body#ext-element-3.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;
    }



    body {
    • color: red;
    }

    Inherited from html


    html, body {
    • font-family: "Helvetica Neue",HelveticaNeue,"Helvetica-Neue",Helvetica,"BBAlpha Sans",sans-serif;
    • font-weight: normal;
    }





















    The CSS portion of my app.json:

    Code:
        "css": [        {
                "path": "resources/css/Ext.ux.grid.View.css",
                "update": "delta"
            },
            {
                "path": "resources/css/mobilePFM.css",
                "update": "delta"
            },
            {
                "path": "resources/css/app.css",
                "update": "delta"
            }
        ],
    The kicker is that it was working for a time but no longer. I've tried:

    changing the app.json update for custom css files (not app.css) to full.
    adding
    Code:
    AddType text/cache-manifest .appcache
    to my httpd.conf (apache 2.2 on windows)
    moving app.css to the bottom of the list of css files in app.json (was at the top)
    scratching my head

    The difference looks like this:css discrepancy.png

  2. #2
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    24
    Vote Rating
    0
    pherris is on a distinguished road

      0  

    Default


    Output of sencha app build production:

    Code:
    C:\Users\me\workspace\mobilePFM>sencha app build productionSencha Cmd v3.0.0.250
    [INF]           init-properties:
    [INF]           init-sencha-command:
    [INF]           init:
    [INF]           -before-app-build:
    [INF]           app-build-impl:
    [INF]           production:
    [INF]           -before-init-local:
    [INF]           -init-local:
    [INF]           -after-init-local:
    [INF]           init-local:
    [INF]           find-cmd:
    [INF]           -before-init:
    [INF]           -init:
    [INF]           -after-init:
    [INF]           init:
    [INF]           -before-build:
    [INF]           sass:
    [INF]           -before-sass:
    [INF]           -sass:
    [INF]           [shellscript]
    [INF]           [shellscript] c:\Users\me\workspace\mobilePFM\resources\sass>compass compile --boring --force
    [INF]           [shellscript] identical ../css/app.css
    [INF]           -after-sass:
    [INF]           page:
    [INF]           -before-page:
    [INF]           -page:
    [INF]           building application
    [INF]           Deploying your application to C:\Users\me\workspace\mobilePFM\build\mobilePFM\production
    [INF]           Copied app.js
    [INF]           Copied resources/css/Ext.ux.grid.View.css
    [INF]           Copied resources/css/mobilePFM.css
    [INF]           Copied resources/css/app.css
    [INF]           Copied C:\Users\me\workspace\mobilePFM\resources\images
    [INF]           Copied C:\Users\me\workspace\mobilePFM\resources\icons
    [INF]           Copied C:\Users\me\workspace\mobilePFM\resources\startup
    [INF]           Resolving your application dependencies (file:///C:/Users/me/workspace/mobilePFM/index.html)
    [INF]           Compiling app.js and dependencies
    [INF]           Processing classPath entry : C:\Users\me\workspace\mobilePFM\sencha-compile-temp-dir
    [INF]           Processing classPath entry : C:\Users\me\workspace\mobilePFM\touch\src
    [INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\app.js
    [INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\app
    [INF]           Processing classPath entry : c:\Users\me\workspace\mobilePFM\jslib\ux\
    [INF]           Processing class inheritance graph
    [INF]           Processing instantiation refereces to classes and aliases
    [INF]           Processing source dependencies
    [INF]           Concatenating output to file C:\Users\me\workspace\mobilePFM\build\mobilePFM\production\app.js
    [INF]           Completed compilation.
    [INF]           Processed remote file touch/sencha-touch.js
    [INF]           Processed local file app.js
    [INF]           Minified app.js
    [INF]           Generated delta for: app.js from hash: '09a8b914e6e08a92c1bb65146d95b681eaf10381' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '1f5b9950e59db09795e38756002ae3967cc72f61' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '63d682e59fd109ddb08a8052e8e79f28ff56f199' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '64d35f8a69ea7a98a3b0bfba08928d921fe1dcd5' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '6a7c5ed28f5c3c35542daa45ef510f79ad7aa8c6' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '72778b47c19811d750bf6ddb11fdb2dc6dcdbd90' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '9a87d8e707b1fa6b3e7ba903afdf76c8c82ebd52' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: '9ad9fcecfed927b88107a19c17272b0211c8550d' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: 'b05e86309abd0e1b384500d4c29b58a3868cd494' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: 'b9d00f2913b0484b7c160c1a48cbcb84fcc0cadb' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: 'f7a385cdb23b35e2eee596f436c92359b76c8deb' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Generated delta for: app.js from hash: 'f9bd6475f4f1873fceeca9ee572e157039021be4' to hash: '6708dd39d2684c1b9978bf4d8fbeed67cd6406bb'
    [INF]           Minified resources/css/Ext.ux.grid.View.css
    [INF]           Generated delta for: resources/css/Ext.ux.grid.View.css from hash: 'd85553b3ab14482985837b47c5d514cf4682e3d7' to hash: 'e4b4ce3516398406f2fd20b36e1ac80a1acff399'
    [INF]           Minified resources/css/mobilePFM.css
    [INF]           Minified resources/css/app.css
    [INF]           Generated app.json
    [INF]           Embedded microloader into index.html
    [INF]           Generating appcache
    [INF]           Generating checksum for appCache item: index.html
    [INF]           Successfully deployed your application to C:\Users\me\workspace\mobilePFM\build\mobilePFM\production
    [INF]           -after-page:
    [INF]           run:
    [INF]           -build:
    [INF]           -after-build:
    [INF]           build:
    [INF]           -after-app-build:
    [INF]           app-build:
    
    
    
    
    C:\Users\me\workspace\mobilePFM>

  3. #3
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    24
    Vote Rating
    0
    pherris is on a distinguished road

      0  

    Default


    Bumping this thread as I am still dealing with this problem. Could it have to do with the theming? This is my scss file:

    @import 'sencha-touch/default/all';


    // You may remove any of the following modules that you
    // do not use in order to create a smaller css file.
    @include sencha-panel;
    @include sencha-buttons;
    //@include sencha-sheet;
    @include sencha-picker;
    //@include sencha-tabs;
    @include sencha-toolbar;
    @include sencha-toolbar-forms;
    //@include sencha-indexbar;
    @include sencha-list;
    @include sencha-list-paging;
    @include sencha-list-pullrefresh;
    @include sencha-layout;
    //@include sencha-carousel;
    @include sencha-form;
    @include sencha-msgbox;
    @include sencha-loading-spinner;


    // Your custom code goes here...

  4. #4
    Sencha - Ext JS Dev Team
    Join Date
    Jan 2012
    Posts
    34
    Vote Rating
    6
    kkrohe is on a distinguished road

      0  

    Default


    It's possible this is a caching issue. You might try clearing the cache, along with running a 'localStorage.clear()' statement in the debugger console.

    Production builds use a version of the micro loader that will cache delta patches in local storage for the app, so clearing all that out should cause it to download fresh copies of app files.

    Also, you could try temporarily moving the archive folder our of the way so that no previous version delta patches are generated. This would help isolate the delta patch mechanism from the mix.

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    12
    Vote Rating
    0
    sjoshi is on a distinguished road

      0  

    Default Same issue

    Same issue


    I'm seeing the same issue. It's almost like the additions to app.css don't seem to apply at all.

    See before
    DiffSize.png

    And After building for production
    SameSize.png
    Sunit

Thread Participants: 2

Tags for this Thread