Dojo Tollkit - height of ScrollableView inside Dialog

Question

I use Dojo Toolkit 1.7.2 from http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js

I need to show scrollable (with help touch) content inside dialog. Also, if possible, I will need to have transition between views inside dialog like at mobile too.

What I do (simplified version of code):

var dialog = new Dialog();
var view = new ScrollableView({
    selected: true
});

//add some content inside view. Content heigh is greater than height of dialog.

If I do this, the dialog tries to fit the whole height of the content.

Next attempt:

var dialog = new Dialog({
    style: {
        width: 600,
        height: 400
    }
});

or

dialog.resize({w: 600, h: 400});

Now dialog has fixed height, but inner ScrollableView instance won't scroll to bottom of its content.

When I dig into the source, I find that ScrollableView inherits from dojox/mobile/_ScrollableMixin which inherits from dojox/mobile/scrollable.

The resize() function of dojox/mobile/scrollable uses window height in order to calculate scrolling functionality.

Is there some way to have what I need without implementating my own version of ScrollableView?

Solution:

var dialogRect = domGeometry.getMarginBox(dialog.domNode);
var headerRect = domGeometry.getMarginBox(dialog.titleBar);
var containerNodePaddingTop = domStyle.get(dialog.containerNode, "paddingTop");
var containerNodePaddingBottom = domStyle.get(dialog.containerNode, "paddingBottom");

var viewHeight = dialogRect.h - headerRect.h - containerNodePaddingTop - containerNodePaddingBottom;
var view = new ScrollableView({
    selected: true,
    height: viewHeight.toString() + "px"
});
// or
// view.set("height", viewHeight.toString() + "px");

To Ernest Friedman-Hill: Hi. Usage of "==========" is prohibited? — kostik
I bet this is related: grokbase.com/t/dojo/dojo-checkins/115fx49dpw/… — mschr

simondiercks simondiercks · Accepted Answer · 2012-07-30T09:18:39

Fixed it this way:

var Name = 'yourdialogid';
dojo.query("#"+Name+" .dijitDialogPaneContent").forEach(function(node, index, arr){
   dojo.style(node,"overflow","auto");
   dojo.style(node,"height",(dojo.position(dijit.byId(Name).domNode).h-80)+"px");
});

Dojo Tollkit - height of ScrollableView inside Dialog

1 Answers