In Dojo I can't get a nested ContentPane in a StackContainer to resize when new content is added to it

Go To StackoverFlow.com

0

I have a StackContaner which contains multiple ContentPanes. When I try to add content to a nested ContentPane (after it has been created and rendered), it doesn't resize, it always keeps it's initially size. Is there an easy way to get around this? Here is how it is laid out:

StackContainer
-ContentPane
--ContentPane (nested)
-ContentPane

Here is working example example:

http://jsfiddle.net/zzdyM/1/

Click the add button in the sample, I want to make it so the divs automatically resize the height to show the new content, instead of keeping the same height with scrollbars. Clicking the button should add another span element to the innerPane, not replace what is currently there.

Any ideas what I'm doing wrong?

2012-04-04 01:42
by Ryan M


0

Are you trying to achieve a specific layout or just replace the existing content "Blah Blah Blah" with new content?

If you just wish to replace existing content with new content, the following is the best option:

 dijit.byId('innerPane').attr('content','<span>Added Content</span>');

See updated fiddle: http://jsfiddle.net/YdZyZ/1/

2012-04-04 04:30
by Vijay Agrawal
Vijay, thanks for the suggestion. I'm not try to replace the content already there, I'm try to add content to it. Every time the button is clicked, should add another span element to the innerPane - Ryan M 2012-04-04 04:43
Then, do: dijit.byId('innerPane').attr('content', dijit.byId('innerPane').attr('content') + 'Added Content'); Updated fiddle: http://jsfiddle.net/YdZyZ/2 - Vijay Agrawal 2012-04-04 04:52
That doesn't work either. Try to continue pressing the Add Button until it wraps to the next line, the height doesn't resize to the content added - Ryan M 2012-04-04 15:39
ok so you do not want scrollbars in the contentpane? so in your fiddle, you want the "Add" button to keep shifting down as the content in the contentpane keeps getting bigger? if thats what you want, you will probably need to set the height on the stackcontainer everytime content is added to the innercp, to make it resize. SOmething like: dojo.style( dijit.byId('stackContainer').domNode, 'height', dijit.byId('innerPane').domNode.scrollHeight + 100 + 'px') - Vijay Agrawal 2012-04-04 16:22
Yes, I want the content to keep shifting down and getting bigger, sorry for not being clear. I was hoping I wouldn't have to calculate the height myself when content is added, but it looks like I might have to. Thanks again for the help - Ryan M 2012-04-04 17:28
yes - layouts like these with auto-height get tricky - there are APIs such as resize() on contentpane and stackcontainer. You may try to set heights on them to 100% and try invoking resize() or _layoutChildren() methods - you might just get lucky - do share if you do figure it out :-) btw - resize uses dojo.marginBox to compute heights anyway - Vijay Agrawal 2012-04-04 17:34