Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#4448 closed defect (invalid)

form tag breaks render when inside SplitContainer or TabContainer

Reported by: guest Owned by: anonymous
Priority: high Milestone:
Component: General Version: 0.9
Keywords: Cc: hugh@…
Blocked By: Blocking:

Description

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).

Change History (5)

comment:1 Changed 12 years ago by bill

Resolution: invalid
Status: newclosed

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?.

comment:2 Changed 12 years ago by guest

Resolution: invalid
Status: closedreopened

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.

comment:3 Changed 12 years ago by 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

comment:4 Changed 12 years ago by bill

Resolution: invalid
Status: reopenedclosed

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%.

comment:5 in reply to:  4 Changed 12 years ago by 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%.

Note: See TracTickets for help on using tickets.