Hello @Mikael!
First off just by looking at your example I can point you one thing:
Whenever you use an Ext.NET component within a block, if there are just Ext.NET components, avoid using the
<Content>
block to wrap it. Basically this helps layout, and making everything fit.
I'm referring to, specifically, line 52 of your code sample. You may (or rather, should) use
<Items>
there instead. This may help you get the panel to stick to the size you need. Besides, as you want just something to wrap around the google maps component, you may try first to just have the map div within that portlet and, in case it doesn't work for your needs, you can switch the panel to an
ext:Container
, which would be "lighter" to the page.
Further down a little, yes, where you want to have the div (immediately wrapping it) should be a
<Content>
tag as you used. Bear in mind it still means Ext.NET's layout system won't be touching whatever's inside it (and that's one of the reasons you have issues with height and width set to 100%).
That said, you won't get auto-fit like that out of the box, unfortunately. You'd have to wire width/height to
resize or
load events, depending how your page behaves. If the outer components changes dimensions as client side window is resized, or device orientation changes, then you probably want the former.
Going even further down again, couldn't we just discard any usage of
<Content>
blocks, letting Ext.NET fully handle layout for us? Wouldn't the following work for you?
<ext:Portlet ID="Portlet1" runat="server" Title="Another Panel 1" Icon="Accept" Height="500">
<Items>
<ext:Container runat="server" ID="map" />
</Items>
</ext:Portlet>
Notice I changed the block in your code corresponding to lines 51-65. The
ext:Container
, as being an
<Items>
element, fits to its surrounding
PortLet (due to its default layout), then nothing else should be needed, as google maps will replace everything within the container element with its own, 100%-width-height, HTML elements.
Is that an acceptable approach? If not, we'd need to dig down the resize/reload event to give width/height to the inner div depending on its surrounding component's "html body space".