1

I am using a collapsible panel extender on a shopping page. I am using it to show/hide special offers. The panel containing these is fixed at the bottom of the page. I have the panel working (expanding and contracting), but I need to change the panel to make it collapse downward instead of upward. The default collapse behavior is to collapse upward. This causes a problem for me because there is a gap between the special offers panel and the bottom of the page after collapsing the panel.

My code is below:

<!--teaser panel-->
    <asp:UpdatePanel ID="upTeaser" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="lbShowHideTeaserPanel" EventName="Click"/>
        </Triggers>
        <ContentTemplate>
            <asp:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
             TargetControlID="pnlTeaserContainer" 
             VerticalSide="Bottom" 
             HorizontalSide="Center"
             ScrollEffectDuration=".1"
             >
            </asp:AlwaysVisibleControlExtender>
            <asp:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" CollapseControlID="lbShowHideTeaserPanel"
                CollapsedText="[+] Show Special Offers" ExpandControlID="lbShowHideTeaserPanel"
                ExpandedText="[-] Hide Special Offers" TargetControlID="pnlTeaserContent" TextLabelID="lbShowHideTeaserPanel"
                SuppressPostBack="true" >
            </asp:CollapsiblePanelExtender>
            <asp:Panel ID="pnlTeaserContainer" runat="server" CssClass="teaserContainer">
                <asp:Panel ID="pnlTeaserCollapser" runat="server">
                    <div style="text-align:right;">
                        <asp:LinkButton ID="lbShowHideTeaserPanel" runat="server" 
                        OnClick="lbShowHideTeaserPanel_Click"  
                        Text="[-] Hide Special Offers" style="color:#ff761b;" ></asp:LinkButton>
                    </div>
                </asp:Panel>
                <asp:Panel ID="pnlTeaserContent" runat="server" Visible="true">
                    <asp:Literal ID="litTeaserText" runat="server"></asp:Literal>
                </asp:Panel>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    <!--end teaser panel-->

Basically what I need to do is something to prevent the gap from appearing under the panel after it collapses upward; something akin to "CollapseDirection="up", OR make the panel reposition to the bottom of the screen after collapse if changing the collapse direction is not possible.

Thanks!

user984185
  • 11
  • 2
  • You can probably achieve what you're looking for by simply modifying the CSS on your page. Look at the markup generated by your CollapsiblePanel and style it accordingly. I can't really tell you how to style it if I don't know the markup though – Dmitry Samuylov Dec 19 '12 at 15:14
  • here's my css: .teaserContainer { border:#ff761b thin solid; width:603px; background-color: #73cbf7; /*light blue color*/ color:Black; padding-right:5px; border-radius: 10px; -moz-border-radius: 10px; left:252px !important; vertical-align:bottom; /*position:fixed !important;*/ /*bottom:0 !important;*/ max-height:50px; overflow:auto; } – user984185 Dec 19 '12 at 16:59
  • I meant the HTML markup for this control when you do view source on the page. Is your page available online somewhere that you can provide a link to for me to look at? – Dmitry Samuylov Dec 20 '12 at 16:25

0 Answers0