Problem rendering Canvas width:100% with position:relative

[mstickel]

I'm evaluating SmartClient and ran into a situation as follows:

- I have an html page with content that adjusts to the width of the browser
- My element needs to fit inline with other pre-existing content, so I used position:relative
- I would like the element to fill up the available horizontal space (width: 100% vs setting width to some fixed-width number)

From reading the documentation, I see that Canvas width is calculated as a fixed number based on: percentSource (won't work - I don't have another reference widget), masterElement (same problem), as a percentage of the parent widget (I don't have a parent widget), and finally as a percentage of page size.

It appears that my Canvas is calculated as a percentage of the page size. This is a problem -- this element needs to fit inside its parent elements, which is essentially a set of nested divs that specify margins, borders, padding, etc.

When I load this all up in Firefox 11.0, and I put a border around the Canvas, I notice that it extends out past the edge of its containing div element, due to its calculated width being wider than the containing div element's width.

If I fire up Firebug and disable the css 'width' attribute on my rendered Canvas div element, the Canvas draws just fine (inside its containing div), so I know it's possible to render it correctly. I just can't seem to figure out how to do it. Suggestions?

The version of SmartClient I'm using is 8.2 build 2012-04-06.

Sample code on its way shortly...

[Isomorphic]

The interior sizing algorithms of something like a ListGrid or Layout can't work without knowing how much space is available.

You're best bet is to use SmartClient components for the whole screen, or for the whole screen minus some fixed-size elements such that you can still calculate the space that SmartClient occupies. If you can't do this, you need to wait for the rest of the screen to render, measure the available space using direct-to-DOM techniques, then insert the SmartClient components once you know their size.