Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#14967 closed defect (invalid)

Layout problems with dijit.layout and nested widgets instantiated declaratively

Reported by: Paul Christopher Owned by: Paul Christopher
Priority: undecided Milestone: tbd
Component: Dijit Version: 1.7.2
Keywords: Cc:
Blocked By: Blocking:



Maybe related to, nested widgets instantiated declaratively do not layout properly. Moreover the parser seems to miss some information when putting together all the nested widgets.

Steps to reproduce the issue

Run the attached test case The html page contains the markup for the instatiation of a custom widget which is basically just a dijit.layout.TabContainer. This very widget contains in its template another widget, which is basically just a dijit.layout.ContentPane named "My first tab". This "inner widget" contains another "inner inner widget" which procudes a <ul><li>list of 100 items. Problem: The ContentPane does not recognize that its content has been grown by the inner inner widget. Calling resize on the tab container has no effect. Moreover the parser looses the title of the ContentPane. The tab has no title (instead of "My first tab").

Expected behaviour

  • The widget should layout properly on instatiation.
  • The tab name should be "My first tab".


So this test case is about two issues: 1) The layout problem 2) the missing title problem because of the nesting.

Attachments (2) (3.0 KB) - added by Paul Christopher 9 years ago.
testLayout.html (2.7 KB) - added by Paul Christopher 9 years ago.

Download all attachments as: .zip

Change History (9)

Changed 9 years ago by Paul Christopher

Attachment: added

comment:1 Changed 9 years ago by bill

Owner: set to Paul Christopher
Status: newpending

We have lots of tests where nested widgets work. It's hard to tell what's going on with your testcase since it's so large. Please reduce it as much as possible, and reattach as a single HTML file. If your custom widgets are just TabContainer's and ContentPane's then try to make the test case with an actual TabContainer and ContentPane.

comment:2 Changed 9 years ago by Paul Christopher

Status: pendingnew

I have reduced the above test case as much as possible and added it as a single file, see testLayout.html.

By "proper layout" I mean: The ContentPane should have a working scroll bar that allows to view all 100 items.

Changed 9 years ago by Paul Christopher

Attachment: testLayout.html added

comment:3 Changed 9 years ago by bill

Status: newpending

OK, thanks for reducing the test case. I see how there's no scrollbar, because the ContentPane has height = 1967 rather than height = 265. (Your numbers may vary.)

The issue I see with your code is that your CustomInnerWidget has a ContentPane as it's root node. That's not supported because you can't have a subwidget as the root node of a main widget. You have to nest it inside a div, and then pass resize() calls from the main widget to the subwidget.

Does that fix your problem?

comment:4 Changed 9 years ago by bill

PS: as for the missing title, the problem is that your CustomInnerWidget does not have a title.

comment:5 Changed 9 years ago by Paul Christopher

Status: pendingnew

Bill, thanks for the quick answer. I didn't know that you cannot have a another widget as the root node of a widget. So I just need to find a workaround and I'm sure that it will work then.

Maybe it's worth a thought to support this in future? My design pattern is not too unrealistic, is it?

PS: In line 52 I have specified a title. But since subwidgets are not supported as root nodes, this does not work.

comment:6 Changed 9 years ago by bill

Resolution: invalid
Status: newclosed

This is a common request, and I'd definitely like to support it, but it just doesn't seem possible.

The problem is having one DOMNode that maps to two widgets. If I called dijit.byNode() on that DOMNode, which of the widgets would it return? And the widgetId attribute of the DOMNode, does it become a list of widgets instead of a single widget? And so forth.

Anyway, I'm going to close this ticket. If someone comes up with a clever way to support having another widget as the root node of a widget I'd definitely be interested.

comment:7 Changed 9 years ago by ben hockey

i've found that having one widget as the root node of a template usually means that you really intend for your widget to be an extension of that kind of widget rather than for your widget to have one of those kinds of widgets. it's the classic "is a" versus "has a" - a Foo widget at the root node of the template means that conceptually your widget "is a Foo" rather than your widget "has a Foo". as such, your javascript should be written to match - your widget should extend the Foo class.

if you really do mean that your widget has a Foo then just wrap your template in another div and everything should work.

i don't think there's a need to try to support a widget on the domNode since i think if you're putting a widget on the domNode of your template then conceptually your widget is an extension of that kind of widget and your js really should extend that widget.

Last edited 9 years ago by ben hockey (previous) (diff)
Note: See TracTickets for help on using tickets.