Dojo Dijit and HTML5 in Real world applications/Dijit/dijit.Dialog

dijit.Dialog

Dialog with scrollbar

The dijit.Dialog will auto size by default. It is easy to force a fixed size. However, the styling of width, hight and overflow of the dijit.Dialog should be done inside the dijit.Dialog div tag:

<!-- Definition for the dijit.Dialog boxes -->
<div id="d1" data-dojo-type="dijit.Dialog" 
             data-dojo-props=" title: 'Scroling Dialog, draggable!',
                               tooltip:'The Tooltip property is not implemented for the dijit.Dialog!',
                               draggable: true"
             data-dojo-id="d1">
    <!-- width, height and overflow must be defined inside the dijit.Dialog: -->
    <div style="width: 350px; height: 100px; overflow: auto;">
        <p>
            This dijit.Dialog has a scrollbar because width, height and overflow has been specified inside the Pane:
        </p><p>    
            &lt;div style="width: 350px; height: 100px; overflow: auto;"&gt;
        </p><p>
            Note: The Tooltip property is not implemented for the dijit.Dialog!
        </p>
        
        <!-- Close button -->
        <button data-dojo-type="dijit.form.Button" 
        data-dojo-props=" onClick: function (){dijit.byId('d1').hide();}  ,
                          type: 'button'">
        Close dijit.Dialog!
        </button>
    </div>
</div>

If the style (height, width and overflow) are specified in the dijit.Dialog properties an unexpected result appears. See the demo of the dijit.Dialog implementation here.

Verified in

IE 8, Firefox 3.6.22, Dojo 1.6.1

References

Demo of dijit.Dialog with scrollbar, draggable, non dragable