What's New?

[CLOSED] CompositeField - Height missing when form panel rendered hidden

  1. #1
    Feb 03, 2011, 9:35 PM

    [CLOSED] CompositeField - Height missing when form panel rendered hidden

    I've got a form panel what uses CompositeFields. The form panel is originally rendered hidden. It took me awhile to figure this out, but if I don't render the form panel originally hidden the composite fields show just fine. However, if I render the formpanel hidden and then show it later, the composite field's div with the class x-box-inner has a height of 0px. how do I fix this? 

    <ext:FormPanel ID="frmPlnCalendarEditEvent" runat="server" Hidden="true" Border="false">
    <Items>
        <ext:Hidden ID="EventId" runat="server" DataIndex="EventId" />
        <ext:Hidden ID="CalendarId" runat="server" DataIndex="CalendarId" />
        <ext:TextField ID="Title" DataIndex="Title" runat="server" FieldLabel="Name" />
        <ext:TextArea ID="Notes" DataIndex="Notes" runat="server" FieldLabel="Description" />
         <ext:CompositeField ID="CompositeField1" 
                runat="server" Height="25"> 
                <Items>          
                    <ext:DisplayField runat="server" Text="Start Date" />
                    <ext:DateField ID="StartDate2" Width="100" DataIndex="StartDate" runat="server"  />
                    <ext:DisplayField runat="server" Text="Start Time"  />
                    <ext:TimeField ID="StartTime2" Width="100" DataIndex="StartTime" runat="server"  />
                    <ext:Checkbox ID="IsAllDay2" DataIndex="IsAllDay" runat="server"   />
                    <ext:DisplayField runat="server" Text="All Day"  />
                </Items>
        </ext:CompositeField>
             <ext:CompositeField ID="CompositeField2" 
                runat="server" Height="25">
                <Items>
                    <ext:DisplayField ID="DisplayField2" runat="server" Text="End Date" />
                    <ext:DateField ID="EndDate2" Width="100" DataIndex="EndDate" runat="server" />
                    <ext:DisplayField ID="DisplayField1" runat="server" Text="End Time" />
                    <ext:TimeField ID="EndTime2" Width="100" DataIndex="EndTime" runat="server" />
                </Items>
            </ext:CompositeField>
    </Items>
</ext:FormPanel>
    Last edited by geoffrey.mcgill; Feb 03, 2011 at 10:45 PM. Reason: [CLOSED]
  2. #2
    Feb 03, 2011, 9:39 PM
    ok, i've got a work around, but it's interesting how the composite field works. It might use the parent's height or something like that.

    If anyone has this issue, try this:

    <Listeners>
        <Render Handler="#{frmPlnCalendarEditEvent}.hide()" />
    </Listeners>
    Before render won't work.
  3. #3
    Feb 03, 2011, 10:15 PM
    Hi,

    Immediately after you call .show() on the FormPanel, add an extra call to .doLayout().

    Please let me know if this helps solve the problem.
    Geoffrey McGill
    Founder
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  4. #4
    Feb 03, 2011, 10:19 PM
    NICE! thanks!
  5. #5
    Feb 04, 2011, 7:15 AM
    Hi,

    Also you could just set HideMode="Offsets" for FormPanel and it will work without workaround.
  6. #6
    Feb 04, 2011, 2:20 PM
    HideMode="Offsets"
    what does that do?
  7. #7
    Feb 04, 2011, 2:41 PM
    Please see
    http://dev.sencha.com/deploy/dev/doc...ember=hideMode

    Note: the default of 'display' is generally preferred since items are automatically laid out when they are first shown (no sizing is done while hidden)
    So, or HideMode="Offsets" or .doLayout() after rendering.
  8. #8
    Feb 05, 2011, 12:45 PM
    Actually, HideMode="OffSets" doesn't work well if you are hiding a panel with an iframe. It seems to be an IE bug or a combination of the two.

    Try using that in IE with an HTML Editor inside a panel. The iframe from the htmleditor shows through.
  9. #9
    Feb 07, 2011, 1:55 PM
    Hi,

    I cannot reproduce it
    <%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Ext.Net Example</title>

</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
         
        <ext:FormPanel ID="frmPlnCalendarEditEvent" runat="server" Hidden="true" Border="false" HideMode="Offsets">
    <Items>
        <ext:Hidden ID="EventId" runat="server" DataIndex="EventId" />
        <ext:Hidden ID="CalendarId" runat="server" DataIndex="CalendarId" />
        <ext:TextField ID="Title" DataIndex="Title" runat="server" FieldLabel="Name" />
        <ext:TextArea ID="Notes" DataIndex="Notes" runat="server" FieldLabel="Description" />
         <ext:CompositeField ID="CompositeField1"
                runat="server" Height="25"> 
                <Items>          
                    <ext:DisplayField ID="DisplayField1" runat="server" Text="Start Date" />
                    <ext:DateField ID="StartDate2" Width="100" DataIndex="StartDate" runat="server"  />
                    <ext:DisplayField ID="DisplayField2" runat="server" Text="Start Time"  />
                    <ext:TimeField ID="StartTime2" Width="100" DataIndex="StartTime" runat="server"  />
                    <ext:Checkbox ID="IsAllDay2" DataIndex="IsAllDay" runat="server"   />
                    <ext:DisplayField ID="DisplayField3" runat="server" Text="All Day"  />
                </Items>
        </ext:CompositeField>
             <ext:CompositeField ID="CompositeField2"
                runat="server" Height="25">
                <Items>
                    <ext:DisplayField ID="DisplayField4" runat="server" Text="End Date" />
                    <ext:DateField ID="EndDate2" Width="100" DataIndex="EndDate" runat="server" />
                    <ext:DisplayField ID="DisplayField5" runat="server" Text="End Time" />
                    <ext:TimeField ID="EndTime2" Width="100" DataIndex="EndTime" runat="server" />
                </Items>
            </ext:CompositeField>
            <ext:HtmlEditor runat="server"/>
    </Items>
</ext:FormPanel>

        <ext:Button runat="server" Text="Show the form">
            <Listeners>
                <Click Handler="frmPlnCalendarEditEvent.show(); " />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  10. #10
    Feb 07, 2011, 2:03 PM
    That's interesting. Maybe because you're not loading it in a panel using AutoLoad.

    the issue is definitely there though. anyway, i just use the doLayout()

Similar Threads

  1. [CLOSED] GridPanel: Paging toolbar is not rendered in a hidden div
    By OSYS_FMS in forum 1.x Legacy Premium Help
    Replies: 27
    Last Post: Apr 27, 2012, 10:25 AM
  2. [1.0] Panel not stretched by LayoutRow when rendered with Hidden = true
    By nextSTEP in forum 1.x Help
    Replies: 5
    Last Post: Nov 16, 2010, 4:27 PM
  3. [CLOSED] [1.0] Initially Hidden fields in CompositeField do not render properly on becoming visible
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 19, 2010, 5:00 AM
  4. [CLOSED] How to change the height property of a panel after it is rendered and also wich url was loaded using that panel?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 01, 2010, 6:25 PM
  5. Missing HTML when rendered over SVG content
    By seanwo in forum Bugs
    Replies: 3
    Last Post: Mar 01, 2010, 4:55 AM

Posting Permissions