Material-ui: [Dialog] padding calculation is not working properly

[ddeath]

Hi there,
I use material-ui v0.13.4 and react v0.14.2

Padding on Dialog container is calculating incorrectly if you have multiple monitors. I have 1366x768 laptop display and one external 1920x1080px display.

On laptop display it is working well but on external not. Lets say that I have opened Google chrome browser with multiple tabs, where one of them is page with dialog. If I remove that tab from window (it makes separate window) the padding is calculated wrong.

Here is example:

import Component from 'react-pure-render/component';
import React from 'react';
import Dialog from 'material-ui/lib/dialog';


export default class SummaryModal extends Component {

    render() {
        let standardActions = [
            { text: 'Close' },
        ];

        return (

            <Dialog
                title="Summary"
                actions={standardActions}
                autoDetectWindowHeight={true}
                autoScrollBodyContent={true}
                open={true}
                onRequestClose={null}>
                <div style={{height: '1000px'}}>
                    aaa
                </div>
            </Dialog>
        );
    }
};

Laptop:

External:

If I reload browser window on external display, then it is calculated right.

[oliviertassinari]

I confirm, we have some issue with the height of the dialog, and the vertial centering.

[echenley]

I have a dialog with tabs of arbitrary height and transitions between them (using react-swipeable-views). The current Dialog doesn't support this, but in the meantime, I'm using something like this to override the natural dialog positioning:

<Dialog contentStyle={ dialogStyles } />

var dialogStyles = {
    position: 'absolute',
    left: '50%',
    top: '50%',
    transform: 'translate(-50%, -50%)'
};

This method means you don't ever have to recalculate the height of the modal. There might be some edge cases where this doesn't work (transforms used to and probably still cause blurriness in some browsers if 50% resolves to a half-pixel value).

There are a couple other css-only methods which might be considered by the team here. Inline-block and display: table-cell can be used to vertically center elements of arbitrary height. It's important to look out for browser quirks with clever stuff like this but it's worth looking into for the out-of-the-box performance.

[FredericHeem]

@echenley thanks a lot for the workaround.

[sturoid]

I have had a lot of problems with this as well. One of the dialogs I use is positioned correctly but it wasn't for a while. Not sure what fixed it. Another one is still positioned incorrectly and I can't fix it.

[oliviertassinari]

We have been porting the component on the next branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.

[pencilcheck]

Seems to still having similar issue with 0.20.0 but only on windows it seems.