Opened 11 years ago

Last modified 11 years ago

#9597 closed enhancement

Use CSS layout to center dialog — at Version 2

Reported by: Adam Peller Owned by: Adam Peller
Priority: high Milestone: tbd
Component: Dijit Version: 1.3.2
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by Eugene Lazutkin)

ttrenka suggested a clever CSS tip to center the dialog.

<div id=centerpoint>
    <div id=dialog>
         ...
    </div>
</div>

where

#centerpoint {
   top: 50%;
   left: 50%;
   position: absolute;
   /* maybe a rule about overflow: visible? */
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}

Some JS may still be necessary to determine the size and measure the viewport so it fits on screen, but the actual layout could be CSS driven for smoother resizing.

Change History (2)

comment:1 Changed 11 years ago by bill

Description: modified (diff)

comment:2 Changed 11 years ago by Eugene Lazutkin

Description: modified (diff)
Note: See TracTickets for help on using tickets.