Jquery BlockUI Growl at bottom right

Question

I am using BlockUI for jquery to do a growl notification, I have it wired up and working but I want the notification to be at the bottom right not top right.

I modified the css to use bottom:10px but the growl is not rendering correctly. It begins at the bottom but streches half way up the page.

I have a JSfiddle here: http://jsfiddle.net/3wNFe/

with the following code

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 2000,
            showOverlay: false,
            centerY: false,
            css: {
                width: '200px',
                bottom: '10px',
                left: '',
                right: '10px',
                border: 'non',
                padding: '5px',
                backgroundColor: '#000',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .6,
                color: '#fff'
            }
        });

});

EDIT - Solution I found the solution while using firebug, add

top: '',

to the css to make it render correctly.

Answer 1

The problem was that BlockUI was putting top percentage by default:

Try this:

$(document).ready(function() {
$.blockUI({
            message: $('div.growlUI'),
            fadeIn: 700,
            fadeOut: 700,
            timeout: 20000,
            showOverlay: false,
            centerY: false,
            css: {
                right: 0,
                bottom: 0,
                left: '',
                top: ''
            }
        });

});

Answer 2

BlockUI is setting the top position to 40% by default. I tried using the global override with no luck. I then tried top -100 which seems to work.

DEMO:

http://jsfiddle.net/3wNFe/7/

$.blockUI({
                message: $('div.growlUI'),
                fadeIn: 700,
                fadeOut: 700,
                timeout: 2000,
                showOverlay: false,
                centerY: false,
                css: {
                    width: '200px',
                    bottom: '10px',
                    top: '-100',
                    left: '',
                    right: '10px',
                    border: 'non',
                    padding: '5px',
                    backgroundColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .6,
                    color: '#fff',
                }
            });

Answer 3

add top: '', to the CSS to correct the display.