PDA

View Full Version : I need to place a layer on a bottom edge of a window of a browser



Saint Father
26 May 2010, 11:56 PM
I have the centered block containing "header", "content" and "footer".
The "header" & "footer" block has the fixed height.

But when the block "content" is much less than browser window height , the block "footer" should not jump up and nestle on the block "content". The block "footer" should remain in the bottom of a browser window.
I need to place a layer on a bottom edge of a browser window

I try to use Viewport & layout: 'ux.center' with 3 blocks layout:'vbox'


new Ext.Viewport({
layout:'border',
items:[indexPortalCenter]
});



var indexPortalCenter = {
region: 'center', // this is what makes this panel into a region within the containing layout
autoScroll: true,
layout: 'ux.center',
width: 960,
bodyStyle: 'padding:0; border:0;',
items: [
{
layout:'vbox',
width:960,
layoutConfig: {
align : 'stretch',
pack : 'start',
},
items: [
{title:'Header', html:Ext.example.shortBogusMarkup, height:150},
{
title: 'Content',
html:Ext.example.shortBogusMarkup+Ext.example.shortBogusMarkup+Ext.example.shortBogusMarkup+Ext.example.shortBogusMarkup,
flex:1
},
{title: 'Footer', html:Ext.example.shortBogusMarkup, height:150}
]
}But in this case, when the "content" block comprises the big content, the browser scroll bar does not appear.

Tell please where I can be mistaken? Or there can be I not those solutions use?

Condor
27 May 2010, 12:42 AM
new Ext.Viewport({
layout: 'ux.center',
items: {
xtype: 'container',
width: 960,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'Header',
html: Ext.example.shortBogusMarkup,
height: 150
},{
title: 'Content',
html: Ext.example.bogusMarkup + Ext.example.bogusMarkup + Ext.example.bogusMarkup,
autoScroll: true,
flex: 1
},{
title: 'Footer',
html: Ext.example.shortBogusMarkup,
height: 150
}]
}
});

I did however needed to add the following line to CenterLayout.css:

.ux-layout-center .ux-layout-center-item .x-panel-body {text-align: left;}

Saint Father
27 May 2010, 12:57 AM
thanks, Condor ...
But in this case the skroll-bar appears in the central block "content", however it is necessary for me, that the skroll-bar appeared for a browser window.
In other words - when the block "centre" very big, it should push the block "footer" for a bottom edge of the screen and the browser should have a skroll-bar. At the same time, when the block "centre" very small, the block "footer" should remain pasted to a bottom edge of a browser window.

Saint Father
27 May 2010, 1:40 AM
My reasonings:
the viewport regions can switch on scroll-bar ...
therefore:
In ' viewport ' (region: ' centre ') it is placed "layout: ' ux.centre '"
In this "layout: ' ux.centre '" it is placed "layout:'vbox '" (width: 960)
In it "layout:'vbox '" are registered ' items ' - blocks.
The block "Header" has the fixed height,
The block "content" has autoHeight and in itself - one more block "fit" with the fixed height.
When in the block "content" increases contents size - its (block) height grows .
Thus the block "fit" creeps downwards

But I do not see a skroll-bar (in Mozilla)

Where I should put autoScrool:true?

Saint Father
27 May 2010, 11:30 PM
obviously, layout:'border ' not necessary.
Has made viewport {... layout:'ux.centre '...) and in it - autoScroll.
In items has placed :


{ // simply container, anything else - thanks Condor :)
xtype:'container',
width: 960,
autoScroll: false,
autoHeight: true,
items:[
{
title: 'Footer',
html: Ext.example.shortBogusMarkup,
},
indexCenterPanel,
{
title: 'Footer',
html: Ext.example.shortBogusMarkup,
flex: 1
}
]
}


Well and in 'indexCenterPanel' can be everything.
I, for example, have inserted there xtype:'portal '.
All has appeared easier a shovel.
But - when the height 'indexCenterPanel' small - "Footer" block all the same jumps up.
Someone can already struggled with this problem - How to press it to the screen bottom?