Wednesday, June 16, 2010

Disable Repositioning of a Dojo Dialog

The JavaScript toolkit Dojo provides a nice modal dialog. It's great! One of its features is the repositioning in the center of its parent window. The alignment is always recalculated if the parent's scrollbar is used.

This could lead to a problem if the user's screen resolution is low and in consequence the upper and lower part of the dialog is always out of the viewport. Imagine a dialog where the submit button is at the bottom of the dialog page:



In this case it could be possible that certain users never see the button and therefore never could submit the dialog.

A solution would be to deactivate the repositioning if the scrollbar of the main window is used. Unfortunately, Dojo's Dialog has no configuration option for this.

Digging in the source of Dojo I end up with disabling the event that is fired on usage of the scrollbar. Tested with Dojo Version 1.4:

<div dojoType="dijit.Dialog" id="myDialog"></div>
<script type="text/javascript">
       <!--
         dojo.addOnLoad( function() {
             dijit.byId('myDialog').show(); 
             dojo.disconnect(dijit.byId('myDialog')._modalconnects[0]);
         });
        //-->
</script>

2 comments:

  1. Thanks for the info! I had the same problem and this fixed it almost. I also overwrote the _position() function so that the top-position gets not negative!

    _position: function(){
    this.inherited(arguments);

    // check if top-position is not negative
    if (dojo.style(this.domNode, 'top') < 0)
    dojo.style(this.domNode, 'top', 0);
    }

    ReplyDelete
  2. Thanks so much for posting this code. I searched all over for a solution that would work. This was just what I needed.

    ReplyDelete

And Feedback? Please post a comment: