form tag breaks render when inside SplitContainer or TabContainer

[guest]

I have setup a test case for this here: ​http://userfriendly.com/dojo/layoutTest.html

The two pages in question are:
​http://userfriendly.com/dojo/page1.html <-- DOES NOT render correctly
​http://userfriendly.com/dojo/page2.html <-- DOES render correctly

Now, a sort of workaround would be to just have the form tag outside of the SplitContainer?, but in more my application that isn't exactly doable (I have multiple forms).

[bill]

I see a number of issues with your page1.html file:

1. the outer ContentPane? with width=height=100% is useless. It just contains one child that could be width=height=100%
2. the SplitContainer? says layoutAlign="client" even though it's not a child of the layout container
3. dijit is not meant to work with loading a layout container via an href... resizing etc may be broken
4. the children of a split container need to be widgets. One of your children is a widget but the other is a <form> node. Try making that a ContentPane?.

[guest]

I've made some progress debugging this, and have altered my test cases, but I'm still having a problem when the browser is in strict mode (quirks mode, things are working fine).

​http://userfriendly.com/dojo/layoutTest.html[[BR]] ​http://userfriendly.com/dojo/quirksTest.html[[BR]]

I've tried removing the width=height=100% styles, but then it definitely isn't rendering correctly. I'm not using more than one LayoutContainer?, and my SplitContainer? contains two ContentPanes? only. The splitcontainer isn't exactly a necessary part of the test, removing it doesn't fix the problem.

[guest]

Shoot.. I previewed that post and still messed up :-/ Here are the urls again:

​http://userfriendly.com/dojo/layoutTest.html
​http://userfriendly.com/dojo/quirksTest.html

[bill]

This still isn't a dijit bug. You have

<form id="someForm" action="">
<div dojoType="dijit.layout.TabContainer"
		style="width:100%;height:100%;" >

so there's a <div> inside a <form> (which IIRC is illegal? I forget) but anyway the form has height of 0, so the TabContainer? also gets height of 0. I was suggesting doing

<form id="someForm" dojoType="dijit.layout.ContentPane"
	sizeShare="60" style="width:100%;height:100%;padding:0px;overflow:hidden;">

instead of

<div dojoType="dijit.layout.ContentPane"
	sizeShare="60" style="width:100%;height:100%;padding:0px;overflow:hidden;">
	<form id="someForm" action="">

That might help. Or maybe you can set the form height=width=100%.

[guest]

Just a FYI, In tests, if you convert a form element into a dojoType, it becomes a div. documents.getElementById("someForm") will return the divElement, not a Form.

I have set the form width/height to 100% and it's working now: ​http://userfriendly.com/dojo/layoutTest.html

Hugh / lib

Replying to bill:

so there's a <div> inside a <form> (which IIRC is illegal? I forget) but anyway the form has height of 0, so the TabContainer? also gets height of 0. I was suggesting doing

<form id="someForm" dojoType="dijit.layout.ContentPane"
	sizeShare="60" style="width:100%;height:100%;padding:0px;overflow:hidden;">

That might help. Or maybe you can set the form height=width=100%.