search

malsup / blockui

jQuery BlockUI Plugin
http://jquery.malsup.com/block/
1.69k stars 506 forks source link

Vertical centering does not work with default options #72

Open mrfatguy opened 11 years ago

mrfatguy commented 11 years ago

I'm alerting myself default options in blockUI:

alert('centerY = ' + $.blockUI.defaults.centerY);
alert('css.top = ' + $.blockUI.defaults.css.top);

and I'm getting values of true and 40%.

Yet, after displaying blockUI for full page blocking, it is clearly visible, that is is not vertically centered.

I'm getting values of top = 370 px and bottom = 475 px with blockUI message height = 75px, when browser's main window has 920 px height.

If you divide 370 / 920 you're getting clearly 40%, so it seems, that centerY is ignored in this case (default values) and css.top is taking over.

What am I missing? Could that be a bug?

mrfatguy commented 11 years ago

I've managed to (temporarily) fix the problem with $.blockUI.defaults.css.top = '45%';.

But it doesn't change, that centerY seems to be ignored.

curtisk commented 11 years ago

What should be the correct behavior in this scenario? If centerY is true then ignore css.top, ie. centerY always wins? If that's the case I have a fix for this, just need to test multiple browsers...

We'd probably want to not make centerX and centerY default to true, if they would be overriding positioning css

mrfatguy commented 11 years ago

I'm not enough experienced to make final decision or give you final advice. However, take a look at similar example:

This is a test of <span style="font-weight: normal"><strong>bold text</strong></span>.

Text remains bold, which I understand as: specific parameter (here <strong>, comparable to centerY in your example) always takes over styles.

I think that the best solution, would be to separate internal (default) styles from user-specific ones, so you could always check, if user has specified some CSS or not. And take proper decisions.

I don't say that centerY always wins is the correct idea here. I think, that you should check, if user has provided some non-default CSS styling. If yes -- styles should take precedence. If not -- centerY and similar should be counted as more important.

This way, you can set centerY and centerX to true by default (I'm still more than sure, that vertically and horizontally centered message box is default and expected behavior in most web applications). But, when user provides some custom CSS code, he or she can override this behavior with custom styles.

In my particular example, I did not provided extra CSS styling, remaining on default one, and also left centerY set (right know) default to true, but message box wasn't centered vertically and that was odd.