1

I have a Ajax HTMLEditor in my web page inside a panel which is targeted by the collapsible panel extender.

When the panel is expanded, there is a big empty space without any of the controls inside the panel being displayed.

The issue here is the panel is expanded but there is nothing visible inside it including any buttons and the Html editor. When i scroll up and down though the controls sometimes become visible.

<cc1:CollapsiblePanelExtender ID="ColPnlExtEvents" runat="server" TargetControlID="pnlAddContentEvents"
                BehaviorID="ColPnlExtEventsBehavior" TextLabelID="lblShowEvents" SuppressPostBack="true"
                CollapsedImage="~/images/expand.jpg" ExpandedImage="~/images/collapse.jpg" CollapsedText="(Show Details...)"
                ExpandedText="(Hide Details...)" ImageControlID="ImgBtnEvents" Collapsed="True" CollapsedSize="1"
                CollapseControlID="pnlEvents" ExpandControlID="pnlEvents">
            </cc1:CollapsiblePanelExtender>
            <asp:Panel Style="cursor: pointer" ID="pnlEvents" runat="server" CssClass="collHeader">
                <div style="padding: 2px; cursor: pointer; vertical-align: middle;">
                    <div style="float: left;">
                        <asp:Label ID="abnormalEventsLabel" runat="server">Add Abnormal Events</asp:Label></div>
                    <div style="float: left; margin-left: 20px;">
                        <asp:Label ID="lblShowEvents" runat="server">(Show Details...)</asp:Label>
                    </div>
                    <div style="float: right; vertical-align: middle;">
                        <asp:ImageButton ID="ImgBtnEvents" runat="server" ImageUrl="~/images/expand.jpg"
                            AlternateText="(Show Details...)" />
                    </div>
                </div>
            </asp:Panel>
            <asp:Panel Style="overflow: hidden" ID="pnlAddContentEvents" runat="server" CssClass="collPanel"
                Height="0px">
                <table id="tblEventsDetails" width="100%" runat="server">
                    <tr>
                        <td align="left">
                            <a class="labelText">Description</a>
                        </td>
                        <td style="width: 75%">
                            <uc:RichTextBox ID="abnormalEventsDescriptionRichTextBox" runat="server" />
                        </td>
                    </tr>
                    <tr>
                        <td class="blankRow">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="right">
                            <asp:LinkButton CssClass="btnSimpleSave" ID="abnormalEventSaveLinkButton" runat="server"
                                OnClick="abnormalEventSaveLinkButton_Click" OnClientClick="javascript:return ParticularClosureRichTextBoxValidation('ctl00_cphMain_abnormalEventsDescriptionRichTextBox_HTMLText','Abnormal Events');">Save</asp:LinkButton>
                            <asp:LinkButton CssClass="btnSimpleCancelForSubSections" ID="abnormalEventCancelLinkButton"
                                runat="server" CausesValidation="false" OnClick="abnormalEventCancelLinkButton_Click">Cancel</asp:LinkButton>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
Achilles
  • 11
  • 3
  • I removed "Please help. It's urgent." from the question because it's not relevant and people tend to vote down and ignore questions simply because that phrase is a part of it. – David Oct 13 '11 at 03:03
  • Does this happen in IE6 only? Most likely there's some html being put out by the controls that isn't 100% correct. Different browsers (even different versions of IE) parse the html differently. You may need to abandon the use of the controls if supporting IE6 is a requirement. – David Oct 13 '11 at 03:04

1 Answers1

0

Many times, different JS libraries does not mix well today - you might have encountered the same.

Personally, I prefer pure js based approaches (such as jquery or jquery plugin) over control based approaches (as done in Ajax Control Toolkit). For collapsible panel, you can use jquery sliding functions. For example, see this fiddle that I had put up for another SO question to illustrate multiple collapsible panels

Community
  • 1
  • 1
VinayC
  • 47,395
  • 5
  • 59
  • 72
  • While trying to find a solution to the above issue, i noticed if the mouse hovers on another Ajax Control, all the controls inside the expanded panel are visible. – Achilles Oct 13 '11 at 11:26
  • i tried to set the focus to the HTML Editor after the panel is expanded. The controls are getting loaded for the first time expansion of the panel. Nest again again the same issue is ocurring. – Achilles Oct 13 '11 at 14:33