Opened 7 years ago

Closed 7 years ago

Last modified 7 years ago

#16674 closed defect (worksforme)

Single child of ContentPane doesn't resize as content added

Reported by: Jeremiah Orr Owned by: bill
Priority: low Milestone: tbd
Component: Dijit Version: 1.8.3
Keywords: Cc:
Blocked By: Blocking:

Description (last modified by bill)

If a ContentPane has a single child ContentPane, the child gets a fixed height (style="height: whateverpx"). As content is added to that child (whether by addChild() or directly manipulating the dom), the fixed height stays, and the new content is hidden if it exceeds the container. Here's a jsfiddle:

http://jsfiddle.net/ZGd3K/4/

As you click the Add button, it adds content to the child ContentPane, which is hidden as it exceeds the height that was explicitly added by the parent ContentPane.

I think the problem is in dijit/Layout/_ContentPaneResizeMixin._layoutChildren():

_layoutChildren: function(){
	// snip...

	if(this._singleChild && this._singleChild.resize){
		var cb = this._contentBox || domGeometry.getContentBox(this.containerNode);

		// note: if widget has padding this._contentBox will have l and t set,
		// but don't pass them to resize() or it will doubly-offset the child
		this._singleChild.resize({w: cb.w, h: cb.h});

I don't know why passing an explicit height is necessary when there is a single child, but it causes trouble in this situation.

Change History (6)

comment:1 Changed 7 years ago by bill

Description: modified (diff)
Priority: undecidedlow
Summary: Single child of ContentPane doesn't resize as content addedTitlePane: resize() should do nothing

In general what you described in the ticket description works. But you need to either set a height on the outer ContentPane, or set doLayout=false.

Content will not be hidden because dijit/layout/ContentPane has a default setting of overflow: auto from dijit.css:

.dijitContentPane {
   display: block;
   overflow: auto;
}

Now, your fiddle is actually a ContentPane that contains a TitlePane, not another ContentPane. So I think there's an issue with TitlePane.resize() not doing the right thing, i.e. nothing.

Changing the ticket summary appropriately. But regardless, what you want is to set doLayout=false on the ContentPane.

comment:2 Changed 7 years ago by Jeremiah Orr

I forgot to update the jsfiddle when I discovered that the problem was any ContentPane?, not just TitlePane?. I've updated it so that both the child and parent are ContentPane?, and the same issue occurs:

http://jsfiddle.net/ZGd3K/5/

doLayout: false does fix the problem, as you suggested. Thanks!

comment:3 Changed 7 years ago by bill

OK, well in your new fiddle, the inner ContentPane is actually overflow: auto, so I think the scrollbar is theoretically there but you just can't see it because the inner ContentPane is so short. So I don't think that qualifies as a bug. Like I said above, if you don't have doLayout=false then the outer ContentPane should have a height set.

comment:4 Changed 7 years ago by bill

Component: DojoX LayoutDijit
Owner: set to bill

comment:5 Changed 7 years ago by bill

Resolution: worksforme
Status: newclosed
Summary: TitlePane: resize() should do nothingSingle child of ContentPane doesn't resize as content added

Actually, TitlePane is working fine. I'll check in a test case for reference, but am going to close this ticket.

comment:6 Changed 7 years ago by bill

In [30841]:

add test for TitlePane as single child of a ContentPane, refs #16674

Note: See TracTickets for help on using tickets.