Opened 13 years ago

Closed 13 years ago

#1903 closed defect (invalid)

SplitContainer rendering is broken when using widgetsInTemplate

Reported by: guest Owned by: bill
Priority: high Milestone:
Component: Widgets Version: 0.4
Keywords: Cc:
Blocked By: Blocking:

Description

I have a compound widget that uses various other dojo widgets, layout, split, toolbar, contentpane... I have the following before my widget declaration:

dojo.require( "dojo.io.*" ); dojo.require( "dojo.widget.*" );

I set: widgetsInTemplate : true isContainer : true

and everything renders OK except for the split container. The splitContainer div does not get turned into a widget, e.g. no creation of splitter div, no setting of styles on the child splitpane divs..

As a test, I am using the dojo nightly test markup from the layout test and simply adding a split to one of the contentpanes:

<div widgetId="myWidget" dojoAttachPoint="dapMyWidget">

<div dojoType="LayoutContainer?" layoutChildPriority='left-right'>

<div dojoType="ContentPane?" layoutAlign="top" style="background-color: #b39b86; ">

top bar

</div> <div dojoType="ContentPane?" layoutAlign="bottom" style="background-color: #b39b86;">

bottom bar

</div> <div dojoType="ContentPane?" layoutAlign="left" style="background-color: #acb386; width: 100px;">

<div dojoType="SplitContainer?" orientation="horizontal" sizerWidth="3" activeSizing="false">

<div sizeMin="20" sizeShare="20">left split</div> <div sizeMin="20" sizeShare="20">right split</div>

</div>

</div>

<div dojoType="ContentPane?" layoutAlign="right" style="background-color: #acb386;">

right

</div> <div dojoType="ContentPane?" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">

main panel with a link.<br /> (to check we're copying children around properly).<br /> <select dojoType="combobox">

<option value="1">foo</option> <option value="2">bar</option> <option value="3">baz</option>

</select> Here's some text that comes AFTER the combo box.

</div>

</div>

</div>

If you change the markup to be:

<div widgetId="myWidget" dojoAttachPoint="dapMyWidget">

<div dojoType="dojo:LayoutContainer" layoutChildPriority='left-right'>

<div dojoType="dojo:ContentPane" layoutAlign="top" style="background-color: #b39b86; ">

top bar

</div> <div dojoType="dojo:ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">

bottom bar

</div> <div dojoType="dojo:ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">

<div dojoType="dojo:SplitContainer" orientation="horizontal" sizerWidth="3" activeSizing="false">

<div dojoType="dojo:ContentPane" sizeMin="20" sizeShare="20">left split</div> <div dojoType="dojo:ContentPane" sizeMin="20" sizeShare="20">right split</div>

</div>

</div> <div dojoType="dojo:ContentPane" layoutAlign="right" style="background-color: #acb386;">

right

</div> <div dojoType="dojo:ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">

main panel with a link.<br /> (to check we're copying children around properly).<br /> <select dojoType="dojo:combobox">

<option value="1">foo</option> <option value="2">bar</option> <option value="3">baz</option>

</select> Here's some text that comes AFTER the combo box.

</div>

</div>

</div>

The split widget div 'becomes' a widgets, e.g. gets dojoSplitContainer style, splitter div is created, child divs get dojoSplitPane styles. However, the height and width of the child splitpanes is set to 0 so the rendering barfs.

The above markup works fine if used as plain markup - i.e. not used as the content of a widget. Also, creating a top level child div with dojoAttachPoint='subContainerWidget' has no decernable differnce.

Attachments (3)

trac1903.zip (3.4 KB) - added by rishson@… 13 years ago.
new_1903.html (1.8 KB) - added by rishson@… 13 years ago.
html testcase when using ContentPanes? as Split children
1903fixed.html (1.7 KB) - added by bill 13 years ago.
modified test file to fix user errors; test works correctly now

Download all attachments as: .zip

Change History (9)

comment:1 Changed 13 years ago by bill

OK, please attach the testcase, including an HTML test file, the javascript file containing your custom widget, and the template file.

Changed 13 years ago by rishson@…

Attachment: trac1903.zip added

comment:2 Changed 13 years ago by rishson@…

File structure for the testcase is: [DOJO HOME]/1903

comment:3 Changed 13 years ago by rishson@…

I can now reproduce this behaviour in standard markup:

<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>AdminConsole? Test</title> <script type="text/javascript">

var djConfig = { isDebug: true };

</script> <script type="text/javascript" src="dojo.js"></script> <script type="text/javascript">

dojo.require("dojo.widget.*");

</script>

</head>

<body>

<!-- Secnario 1 - SplitContainer? is not created from markup --> <div dojoType="LayoutContainer?" layoutChildPriority='left-right' style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">

<div dojoType="ContentPane?" layoutAlign="top" style="background-color: #b39b86; ">

top bar

</div> <div dojoType="ContentPane?" layoutAlign="bottom" style="background-color: #b39b86;">

bottom bar

</div> <div dojoType="ContentPane?" layoutAlign="left" style="background-color: #acb386; width: 100px;">

<div dojoType="SplitContainer?" orientation="horizontal" sizerWidth="3" activeSizing="false">

<div sizeMin="20" sizeShare="20">left split</div> <div sizeMin="20" sizeShare="20">right split</div>

</div>

</div> <div dojoType="ContentPane?" layoutAlign="right" style="background-color: #acb386;">

right

</div> <div dojoType="ContentPane?" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">

main panel with a link.<br /> (to check we're copying children around properly).<br /> <select dojoType="dojo:combobox">

<option value="1">foo</option> <option value="2">bar</option> <option value="3">baz</option>

</select> Here's some text that comes AFTER the combo box.

</div>

</div>

<!-- Secnario 2 - SplitContainer? is created but child SplitPanes? have height and width of 0 --> <div dojoType="dojo:LayoutContainer" layoutChildPriority='left-right' style="border: 2px solid black; width: 90%; height: 300px; padding: 10px;">

<div dojoType="dojo:ContentPane" layoutAlign="top" style="background-color: #b39b86; ">

top bar

</div> <div dojoType="dojo:ContentPane" layoutAlign="bottom" style="background-color: #b39b86;">

bottom bar

</div> <div dojoType="dojo:ContentPane" layoutAlign="left" style="background-color: #acb386; width: 100px;">

<div dojoType="dojo:SplitContainer" orientation="horizontal" sizerWidth="3" activeSizing="false">

<div dojoType="dojo:ContentPane" sizeMin="20" sizeShare="20">left split</div> <div dojoType="dojo:ContentPane" sizeMin="20" sizeShare="20">right split</div>

</div>

</div> <div dojoType="dojo:ContentPane" layoutAlign="right" style="background-color: #acb386;">

right

</div> <div dojoType="dojo:ContentPane" layoutAlign="client" style="background-color: #f5ffbf; padding: 10px;">

main panel with a link.<br /> (to check we're copying children around properly).<br /> <select dojoType="dojo:combobox">

<option value="1">foo</option> <option value="2">bar</option> <option value="3">baz</option>

</select> Here's some text that comes AFTER the combo box.

</div>

</div> </body> </html>

comment:4 Changed 13 years ago by bill

Resolution: invalid
Status: newclosed

Please stop inlining HTML into the bug report; the formatting gets all messed up. Attach a testcase instead. Anyway, the problem with your testcase is that the SplitContainer?'s children must be widgets (often ContentPanes?), but you are just using plain divs.

Changed 13 years ago by rishson@…

Attachment: new_1903.html added

html testcase when using ContentPanes? as Split children

comment:5 Changed 13 years ago by rishson@…

Resolution: invalid
Status: closedreopened

Attached is a testcase instead of inline HTML. Even using ContentPanes? as the SplitContainer?'s children, the rendering of the split is broken: the splitter divs are created but do not render.

comment:6 Changed 13 years ago by bill

Resolution: invalid
Status: reopenedclosed

You shouldn't have a ContentPane? around the SplitContainer?. And also, you need to specify the width of the SplitContainer?. I'll attach a modified version of your test file that works correctly.

Changed 13 years ago by bill

Attachment: 1903fixed.html added

modified test file to fix user errors; test works correctly now

Note: See TracTickets for help on using tickets.