CODEWITHSUNDEEP
javascriptmobiledojodojox.mobile
mbecker
mbecker

Reputation: 1673

How to set dojox.mobile.View to height 100%

is it possible to set a dojox.mobile.View to height 100%?

Example: http://jsfiddle.net/sLP4S/6/

Using dojox.mobile.ScrollableView instead works. But my intent is to add an Touch-Event on the View and therefore the View doesn't need to scroll.

Many thanks in advance.

Upvotes: 0

Views: 899

Answers (3)

httpete
httpete

Reputation: 2983

I played around with the ContentPaneResizeMixin, but settled in on this. Don't expect a straight copy and paste - but this pattern will work. Here, I set a has variable from the server in dojoConfig in my header. I detect desktop (through phpMobileDetect).

   <script src="/dojo/dojo.js" type="text/javascript" data-dojo-config="parseOnLoad: false, async: 1, isDebug: 1, mblAlwaysHideAddressBar: false, has: { 'isDesktop': <?= json_encode($isDesktop) ?>  }"></script>

Then, I use the conditional plugin loader to load a different baseClass, and a little sizing logic to take care of the header. Boom. Desktop gets scrollBars natively, iPad gets the ScrollablePane which works fine.

define([
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/has",
    "dojo/has!isDesktop?dojox/mobile/Pane:dojox/mobile/ScrollablePane"
], function(declare, lang, has, Pane) {

    return declare("tt.app.ScrollableAwarePane", [ Pane ], {


        resize: function(){
            this.inherited(arguments);
            if(has('isDesktop')){
                this.containerNode.style.overflowY = "scroll";
                var height = rightPane.offsetHeight - this.getPreviousSibling().domNode.offsetHeight;
                this.containerNode.style.height = height + "px";
            }
        }



    });

});

Upvotes: 0

tik27
tik27

Reputation: 2698

I know this is old, but this is how i did it. I used what mbecker mentioned and created a new view that extended the regular view::

define([
    "dojo/_base/declare",  
    "dojo/dom",
    "dojo/dom-geometry",
    "dojo/dom-style",
    "dojo/window",
    "dojox/mobile/View",
], function( declare,dom,domGeometry, domStyle, win,View){

    // module:
    //      custom/widget/View2
    console.log("Loading View2");

    return declare("custom.widget.View2", [View], {
        tabName:"outertabbar",

        resize: function(){
        //this is for a fixed tabbar 
            //if you dont have one remove this and the tabbox
            var tabBar = dom.byId(this.tabName);
            var tabBox = domGeometry.getMarginBox(tabBar);

                var winBox = win.getBox();
            var height=winBox.h - tabBox.h + "px";
            domStyle.set(this.domNode, "height",height);
            // summary:
            //      Calls resize() of each child widget.
            this.inherited(arguments); // scrollable#resize() will be called

        }
    });
});

Upvotes: 0

alpera
alpera

Reputation: 509

i'm not very talented in web design but learned in time that 100% height always brings trouble. instead, i would get document height in pixels and subtract header,menu etc. from it. and then give absolute height in pixels.

Upvotes: 0

Related Questions