PDA

View Full Version : [CLOSED] Div inside a Panel gets 0px height when set to 100% CSS height



blueworld
Aug 24, 2012, 8:17 AM
Hi,

I'm using a Viewport with a BorderLayout (west and center region only).

The center region only contains a <content> block with HTML elements:


<ext:Panel runat="server" Region="Center" ID="mapPanel" Collapsible="false">
<Content>
<div id="map">
</div>
....
....
....
</Content>
</ext:Panel>


The map div contains a leaflet map (http://leaflet.cloudmade.com), this div is set to 100% width and height in the CSS.
100% width works fine, but if I'm using 100% height the map gets 0px height after loading the page, using a static height like 1000px works, nevertheless, I need to display the map always as 100% / 100% within that center region.

edit: things like height:80% don't work as well, as soon as I'm using a percentage the height gets 0px.

Any idea what might be the problem?

Regards

Daniil
Aug 24, 2012, 11:16 AM
Hi,

Welcome to Ext.NET!

There is an interim <div> which has no height. It is related to the contentEl functionality.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-contentEl (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.AbstractComponent-cfg-contentEl)

Its id is the concatenation of Ext.NET container ID and "-Content".

So, you should set up 100% height for this interim <div> as well.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<style type="text/css">
#Panel1_Content {
height: 100%;
}
</style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel ID="Panel1" runat="server" Region="Center">
<Content>
<div style="height:100%; background-color: yellow;">
Hello!
</div>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


I will consider with my colleagues a possibility to add properties like ContentElStyle and/or ContentElCls for this interim <div>.

By the way, do you really need this <div>? I think you can add a map directly to <Content> now. If you render a map on the fly you can render it directly to Panel body.

Panel1.body.update("map HTML");

Daniil
Aug 24, 2012, 2:08 PM
I will consider with my colleagues a possibility to add properties like ContentElStyle and/or ContentElCls for this interim <div>.


We decided to leave the things as they are for now.

Another approach is set up the contentEl config option via CustomConfig.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<div id="myDiv" class="x-hidden" style="height:100%; background-color: yellow;">
Hello!
</div>

<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center">
<CustomConfig>
<ext:ConfigItem Name="contentEl" Value="myDiv" Mode="Value" />
</CustomConfig>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>