PDA

View Full Version : Possible BorderLayout problem?



salix
22 Mar 2007, 12:21 AM
Hi!

I am new to this and wanted to do some use case development on my own by modifying existing examples you giys have.
I started with layout which is base of all other to follow.
I took Simple layout example.
I added DOCTYPE in front of it and changed that layout do not render in document.body, but in 'container'. Result was a complete layout disappearance in FF 2.x.3 and IE6.
Maybe I am missing something, but I couldn't figure that out.

And - if you remove DOCTYPE - code seems to work...



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Simple Layout</title>
...
<script type="text/javascript">
Example = function(){
return {
init : function(){
var layout = new Ext.BorderLayout('container', { // <----- Changed HERE
north: {
...

JeffHowden
22 Mar 2007, 10:34 AM
Do you have an HTML element with an id of "container" somewhere in your document?

salix
22 Mar 2007, 11:31 AM
Do you have an HTML element with an id of "container" somewhere in your document?

Hmm... as I said this is no my document, this is example named "Simple Layout" in yui-ext documentation.
And - Yes - it has 'container':


<body>
..
<div id ="container">
<div id="header" cla ...
...

JeffHowden
22 Mar 2007, 11:53 AM
Ok, so I've confirmed what you're saying about the inclusion of a doctype. Oddly, the more complex layouts seem to be fine with a doctype (at least a transitional one, anyway) as I have numerous ones in production currently.

For the record, HTML4.01 is, what, a 4 or 5 year old standard? I'd recommend developing using XHTML as your doctype. Save your sanity and use transitional though. Strict is a pipedream that isn't possible in the real world.

salix
23 Mar 2007, 12:15 AM
Thanks for response!
Ok, I tried:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

and - none of them helped the situation. Any other suggestions besides removing DOCTYPE completely.

tryanDLS
23 Mar 2007, 7:46 AM
I don't think that's related to DOCTYPE. Did you read the documentation for BorderLayout? Specifically,

The container the layout is rendered into can be either the body element or any other element. If it is not the body element, the element needs to either be an absolute positioned element, or you will need to add "position:relative" to the css of the element.

JeffHowden
23 Mar 2007, 10:55 AM
Bah, serves me right for not reading the docs on borderlayout before opening my mouth. :evil:

salix
24 Mar 2007, 4:33 AM
I don't think that's related to DOCTYPE. Did you read the documentation for BorderLayout? Specifically,

The container the layout is rendered into can be either the body element or any other element. If it is not the body element, the element needs to either be an absolute positioned element, or you will need to add "position:relative" to the css of the element.


Yes, I did read documentation and tried all ways: relative / absolute / none - didn't work for me either.

Can someone try ti also - it's easy - take example and make modifications I described - see for yourself.

tryanDLS
24 Mar 2007, 8:17 AM
It does seem like something may have changed. I had to add a height and width to the container and it worked with doctype - strict in both FF2 and IE7. Just making the container position:relative doesn't work.
Maybe I'm mistaken in thinking that this used to work with something like

#container {position:relative; margin:50px}

salix
25 Mar 2007, 11:49 PM
It does seem like something may have changed. I had to add a height and width to the container and it worked with doctype - strict in both FF2 and IE7. Just making the container position:relative doesn't work.
Maybe I'm mistaken in thinking that this used to work with something like

#container {position:relative; margin:50px}

Thanks for idea where to dig.
So, findings are:
With DOCTYPE <DIV id="content"> got shrinked.
If I set

#container {position:relative; height: 500px}
page started to show contents otherwise hidden (height is the one that worked)
But that doesn't solve the problem, south region doesn't get glued to bottom of the page if DOCTYPE is specified. I am not so experienced Web developer as you are. Maybe some CSS fixes for this yui-ext part is required...

tryanDLS
26 Mar 2007, 8:35 AM
Well that's b/c your browser height is greater than 500px. The only reason to not put the layout in document.body is for cases when you don't want to fill the entire page, hence a hardcoded height/width on the container element.

salix
26 Mar 2007, 10:13 AM
Well that's b/c your browser height is greater than 500px. The only reason to not put the layout in document.body is for cases when you don't want to fill the entire page, hence a hardcoded height/width on the container element.

That's right - I wanted to make it within "container", so I would be able to center contents on browser.
I guess I have to write "workaround" where browser resize is monitored and container adjusted accordingly.