Hi all,
I've been around since a few days trying to get comfy with SmartGWT on my customers wishlist, though I am rather the oldsk00l, hardcore XHTML-Strict/ AJAX/PHP kind. However, SmartGWT rocks in regards to it's vastness and blew me away (real good reason to get comfy with Java as a WebDev again too). So kudos to you guys at Isomorphic. To the point:
Issue:
GMaps does not behave correctly regarding it's size (which might mean that it doesn't show at all) when being a child/member of a SmartGWT widget/canvas.
Explanation:
I've been googling all day long to have my map canvas position and resize exactly the way I wanted it following loads of older threads, posts and suggestions here, thus staying in the box with Java and SmartGWT thus trying to combine all sorts of RootPanelLayout, Canvas, draw(), drawLATER!!() and such, until I've been so fed up, that I started looking out of the box, took Firebug and actually disassembled the generated HTML.
Using the means of SmartGWT I set all widgets my code to size 100/100 (using all means possible) found a lot of divs with this size (100% x 2) but exactly one div in the chain without this width/height and then understood.
Due to the calculation of the box model in HTML processing the width and height of divs is not calculated according just to it's parent's available space (lets say x²), but including the borders and margins (x² + border-width + margins), therefore precise designs without overflows that would need manual calculation are not possible unless there is one div specifying margins and borders in between parent and content div. That's what SmartGWT does by default (thank god), yet the GMapsWidget expects to get told how much space it has available from it's direct parent, hence GMaps: "I'm supposed to be 100%, how much space is that in px?" - GMaps-Parent-Div (SmartGWT border/margin div with width/height to auto): "I'm auto, YOU are supposed to tell me YOUR size so I can cuddle in between you and my parent!" - Gmaps: "Hm, if you don't tell me your (bra)size then I don't want to cuddle! XD". Fair dues...
Solution:
Explicitly set the CSS width/height to 100% for the border/margin div without specifying borders or margins and let them cuddle.
Example Java Code:
Now define the implicit CSS descriptor for the border div using the className of the Canvas (it is the fourth in line!):
Done! The Google Maps Widget behaves as expected again inheriting it's total possible width/height from it's parent element and sizes itself accordingly.
I hope everybody got it and that you are aware that Isomorphic does great work and that this is a matter of robustness vs. robustness that needed to be manually solved.
Have fun, comment your work and until next time folks!
Seb
I've been around since a few days trying to get comfy with SmartGWT on my customers wishlist, though I am rather the oldsk00l, hardcore XHTML-Strict/ AJAX/PHP kind. However, SmartGWT rocks in regards to it's vastness and blew me away (real good reason to get comfy with Java as a WebDev again too). So kudos to you guys at Isomorphic. To the point:
Issue:
GMaps does not behave correctly regarding it's size (which might mean that it doesn't show at all) when being a child/member of a SmartGWT widget/canvas.
Explanation:
I've been googling all day long to have my map canvas position and resize exactly the way I wanted it following loads of older threads, posts and suggestions here, thus staying in the box with Java and SmartGWT thus trying to combine all sorts of RootPanelLayout, Canvas, draw(), drawLATER!!() and such, until I've been so fed up, that I started looking out of the box, took Firebug and actually disassembled the generated HTML.
Using the means of SmartGWT I set all widgets my code to size 100/100 (using all means possible) found a lot of divs with this size (100% x 2) but exactly one div in the chain without this width/height and then understood.
Due to the calculation of the box model in HTML processing the width and height of divs is not calculated according just to it's parent's available space (lets say x²), but including the borders and margins (x² + border-width + margins), therefore precise designs without overflows that would need manual calculation are not possible unless there is one div specifying margins and borders in between parent and content div. That's what SmartGWT does by default (thank god), yet the GMapsWidget expects to get told how much space it has available from it's direct parent, hence GMaps: "I'm supposed to be 100%, how much space is that in px?" - GMaps-Parent-Div (SmartGWT border/margin div with width/height to auto): "I'm auto, YOU are supposed to tell me YOUR size so I can cuddle in between you and my parent!" - Gmaps: "Hm, if you don't tell me your (bra)size then I don't want to cuddle! XD". Fair dues...
Solution:
Explicitly set the CSS width/height to 100% for the border/margin div without specifying borders or margins and let them cuddle.
Example Java Code:
Code:
MapWidget map = new MapWidget(...);
...
map.setSize("100%", "100%");
Canvas c = new Canvas();
c.setSize("100%", "100%");
c.addChild(map);
c.setStyleName("map-widget-borderbox");
c.draw();
Code:
.map-widget-borderbox > div > div > div {
width: 100%;
height: 100%;
}
Done! The Google Maps Widget behaves as expected again inheriting it's total possible width/height from it's parent element and sizes itself accordingly.
I hope everybody got it and that you are aware that Isomorphic does great work and that this is a matter of robustness vs. robustness that needed to be manually solved.
Have fun, comment your work and until next time folks!
Seb
Comment