View Full Version : How to make a window stick to the bottom of the browser window

7 Aug 2012, 12:09 AM
I've seen the x & y configs, I could work those out, based on available height and width and the windows height and width, but when the browser is resized what then?

That seems a long way around the houses to achieve what css does for us: position: absolute; bottom 0; left 0;

I've also tried using the style config but that, as is typical, gets ignored/gazumped.

7 Aug 2012, 12:54 AM
If you want to show the window in the left-bottom of the browser then you should use the showAt() of the window rather than show(). Review the following code:

Ext.onReady(function () {
var win = new Ext.Window({
title: 'my window'
, height: 200
, width: 400
, html: 'this is demo window.'
, style: 'position:absolute;bottom:0px;left:0px;'
win.showAt(0, window.innerHeight - win.height);

7 Aug 2012, 1:03 AM
This does not solve the problem of the browser being resized...with this code the window gets hidden on browser shrink.

The box shadow is also left behind in its original spot.

The only hack that works is adding this style, but I've had to turn shadow off because you cant style that or id it.

#feedback-window { bottom: 0 !important; top: auto !important; }