What's New?

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

  1. #1
    Aug 24, 2012, 7:17 AM

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

    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
    Last edited by Daniil; Aug 28, 2012 at 5:14 PM. Reason: [CLOSED]
  2. #2
    Aug 24, 2012, 10: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

    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");
    Last edited by Daniil; Aug 24, 2012 at 10:20 AM.
  3. #3
    Aug 24, 2012, 1:08 PM
    Quote Originally Posted by Daniil View Post
    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>

Similar Threads

  1. Panel height into Div
    By Steve88 in forum 1.x Help
    Replies: 2
    Last Post: Mar 02, 2012, 2:32 PM
  2. [CLOSED] Adapt TabPanels height depending on the active Panels height?
    By wagger in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 14, 2011, 10:51 AM
  3. [CLOSED] Height of a panel inside RowLayout does not apply when the RowLayout is inside a TabPanel
    By anup in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 01, 2011, 11:00 AM
  4. Panel height
    By xMAC in forum 1.x Help
    Replies: 8
    Last Post: Jan 10, 2011, 10:32 AM
  5. [CLOSED] [1.0] MessageBoxConfig textbox height - min height
    By methode in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 07, 2010, 10:12 AM

Posting Permissions