Opened 10 years ago

Closed 10 years ago

#9597 closed enhancement (wontfix)

Use CSS layout to center dialog

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 (4)

comment:1 Changed 10 years ago by bill

Description: modified (diff)

comment:2 Changed 10 years ago by Eugene Lazutkin

Description: modified (diff)

comment:3 Changed 10 years ago by dante

the dialog is draggable, and not always centered. dialog also can retain relative position in the viewport when window is scrolled and so on. I would prefer to see position:fixed used, as we're going to have to do positioning math regardless.

comment:4 Changed 10 years ago by bill

Resolution: wontfix
Status: newclosed

Yah, I tend to agree. The position:fixed thing is already filed as #8679.

Note: See TracTickets for help on using tickets.