Login Register

ContentPane refactor

A week or two ago I checked in a bunch of updates to ContentPane. The goal was to make "hidden" initialization work better, i.e., if a TabContainer had a ContentPane with some markup, including some widgets like Grid or Editor that won't initialize correctly when hidden.

The original plan was to use visibility:hidden rather than display:none, but that proved problematic on IE.

So instead, I changed ContentPane to call resize() on all of it's "children" when it is made visible. "Children" is a nebulous word... since ContentPane can contain abitrary markup, it doesn't have children in the same sense as TabContainer or Menu, where the children are directly underneath TabContainer.containerNode. Rather, they can be arbitrarily deeply nested:

<div dojoType=dijit.layout.ContentPane>
    <div>
        <div>
            <div dojoType=dijit.layout.TabContainer height=300px>
                 <div dojoType=dijit.layout.ContentPane> ...
...
</div>

Note that in the example above, when the outer ContentPane is shown it needs to call resize() on the TabContainer, but not on the inner ContentPane. (Calling resize on the inner ContentPane is TabContainer's job.)

Anyway, this will be released in 1.3, but feel free (and encouraged) to try it now and see how it's working for you. It's a big change, so it needs some testing, but it should be for the better.

Bill

IE6 width issue maybe?

Hi Bill,

I've been using the new ContentPane's for the last few days. I've been seeing issues with IE6 showing a horizontal scrollbar when FF3 doesn't. I had assumed this was something I was doing, but I decided to try a bunch of variations of things & see what happened in a more simple layout than I was using. I just took a test file (test_refreshOnShow) and have been changing it up, varying lots of parameters and sizes, etc.

I also changed _lorem.html to have more data in it so it would get vertical scrollbars. I also put in a table tag (or a div) with a width=100%. Or, with a set pixel size matching that of the contentpane (or close to it). In these cases, FF3 would always display things with a vertical scrollbar, as expected, and no horizontal scrollbar, as expected. IE6, however, is adding an horizontal scrollbar to the picture. The amount of display not showing (the amount of scrollable area) is very small and looks like it's just about the width of IE's vertical scrollbar. Kinda like it hadn't taken that width into account.

I don't know if this is my error, a real bug, or just the way things are. I put a sample page out there for you so you can easily see the difference between IE6 and FF3. The URL is: http://tpsreports.realsage.biz/dojo/dojotoolkit/dijit/tests/layout/test_...

I flipped around a lot of settings, widths, content changes, etc. for a few hours, so I may have a useless param here or there, fyi.

ps - I also read through several of the bugs/discussions on the ContentPane issues & changes, so my brain is mush ... hopefully I'm not just missing something obvious.

Thanks!
Dylan Tynan

hmm

Hmm not sure what's going on but I don't think it's a ContentPane issue per se. Maybe something about the width: 100% on the table making it 100% of the width of the viewport, rather than 100% of the width of the containing <div> (i.e., the ContentPane).

Usually the problem is in reverse, that on non-IE browsers setting a node to width: 100% makes it's content 100% of the container's width, and thus content + borders is 105% or something like that.

=========
Bill Keese
Project Lead (aka BDFL) of Dijit

Is it fixed?

Dylan,

I have a similar problem that you outlined here. But when I looked at the URL http://tpsreports.realsage.biz/dojo/dojotoolkit/dijit/tests/layout/test_... in IE8, it looks like the issue is fixed for IE8. In IE8, horizontal scrollbar is not displayed. But in IE6 & 7, same problem still persists.

After some search, it looks like it might be due to the way IE doesn't work correctly with overflow:auto CSS property. Also, it depends on what DOCTYPE is defined in HTML and the version of IE that is used.

Let me know if you find any solutions for IE6 and IE7. I will post here if I find any.

Thanks,
Narsi

refactor for software online

Hello,

I have to write a code of a project for a company which works with "Plimus" - the application should be part of a process for selling software online and I wish to do it with ContentPane and I will have to make code refactoring and the TabContainer.containerNode seems like the right way. would it work in Firefox well?

What about 1.3 release? right now I only see 1.2.3.

Thank you!

As we mentioned before,

As we mentioned before, Swing provides three generally useful top-level container classes: JFrame, JDialog, and JApplet. When using these classes, you should keep these facts in mind:

* To appear onscreen, every GUI component must be part of a containment hierarchy. A containment hierarchy is a tree of components that has a top-level container as its root. We'll show you one in a bit.

* Each GUI component can be contained only once. If a component is already in a container and you try to add it to another container, the component will be removed from the first container and then added to the second.

* Each top-level container has a content pane that, generally speaking, contains (directly or indirectly) the visible components in that top-level container's GUI.

* You can optionally add a menu bar to a top-level container. The menu bar is by convention positioned within the top-level container, but outside the content pane. Some look and feels, such as the Mac OS look and feel, give you the option of placing the menu bar in another place more appropriate for the look and feel, such as at the top of the screen.

cheers,
Gift Ideas

I've been using the new

I've been using the new ContentPane's for the last few days. I've been seeing issues with IE6 showing a horizontal scrollbar when FF3 doesn't. I had assumed this was something I was doing, but I decided to try a bunch of variations of things & see what happened in a more simple layout than I was using. I just took a test file (test_refreshOnShow) and have been changing it up, varying lots of parameters and sizes, etc.

Acer

ContentPane Problem

I have a cars for sale small problem in ContentPane can anybody had already faced it if not please tell where I m making the mistake?

When I use following code it gives an error,its not an error actually but it also doesn't show an output of the href file in contentPane,Why?
when I load in browser it shows an error of like" browser may stop responding your computer want to continue etc....."

Thanks a lot for earlier replies.

The ContentPane?'s hog some

The ContentPane?'s hog some really useful functionality. They provide the most complete implementation of injecting html into a node - with widget parsing on the new content, script execution, style extraction/rendering, path correction etc.

If you want to use those facilities, the answer today is dijit / dojox. If your project isnt using dijit already, you are forced to load it.

I'd like to see an api like (names just for the sake of example) dojox.html.setContent(elm, htmlString); dojox.html.setContent(elm, nodeList); dojox.html.setContent(elm, nodeList, { parseContent: true, extractScripts: true});

..and so on. Eventually the implementation currently spread across the 2 ContentPanes? could call into this (if it could make it into base as dojo.setContent, or dojo.html.setContent)

(I've mentioned this idea a couple of times on #dojo, but couldnt find any ticket for it yet)

preview patch coming...

cheers,
Floor Heat

The ContentPane Dijit is the

The ContentPane Dijit is the Dijit that you use as a single page in a layout Dijit. For example, a tabbed container with six pages usually uses six content panes. You use the ContentPane Dijit to display each page of Dijits that you store in a layout container.

ContentPane Dijits are usually created from

elements with the dojotType attribute set to dijit.layout.ContentPane. Because a ContentPane Dijit is built from
elements, you can use a style attribute to arrange the Dijits in a content pane as you like.

( printing design , stationary design and web design )

Hidden ContentPane in dojo-release 1.3.0 always preloaded

I just tested dojo-release 1.3.0...There is a big problem with ContentPane. When a ContentPane comes with a href, the content is always loaded even if the ContentPane is hidden (in my case, in a hidden tab of a nested TabContainer).