Using AJAX CollapsiblePanelExtender

Hello,

I am using a AJAX CollapsiblePanelExtender within a gridView on a webpage.
The page also contains a fieldset with some labels, a dropdown, 2 textboxes and a "submit" button.

Whenever the collapsible panel 'Plus' button (to expand) or the 'Minus' button are pressed - the controls on the page are slightly moving. That doesn't look so good and I would like to prevent that.

how can I do that?

Below is the code in my aspx page.

Thank you
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="view.aspx.cs" Inherits="InternalMonitorTool.ModuleLogger.view"%>
<%@ Register Tagprefix="calendarControl" Tagname="calendar" Src="../controls/calendar.ascx" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
 
<!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 runat="server">
    <title>INTERNAL MONITOR TOOL</title>
    <LINK href="../css/style.css" type="text/css" rel="stylesheet">
  
    <script language="javascript" type="text/javascript">
        function copyToClipboard(str)
        {
            window.clipboardData.setData('Text' , str);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server" submitdisabledcontrols="true">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
         <table border="0" width="90%" cellpadding="0" cellspacing="0" style="margin-top:10px;margin-left:5px">
            <tr>
                <td align="center">
                    <fieldset  id="filters" runat="server">
                        <table border="0" width="100%">
                            <tr valign="top">
                                <td>
                                    <label for="cboComponents">Compnent:</label>
			                        <asp:DropDownList runat="server" ID="cboComponents" Width="180" style="z-index:0">
			                        </asp:DropDownList>
                                </td>
                                <td>
                                    <calendarControl:calendar id="calFrom" runat="server" LabelText="From: "></calendarControl:calendar>
                                </td>
                                <td>
                                    <calendarControl:calendar id="calTo" runat="server" LabelText="To: "></calendarControl:calendar>
                                </td>
                                <td>
                                    <asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" OnClick="btnSubmit_Click" style="cursor:hand"/>
                                </td>   
                            </tr>
                        </table>
                    </fieldset>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="divMessage" runat="server"></div>&nbsp;
                </td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="gv" Runat="server" Width="100%" CellPadding="3"  
					        BorderWidth="1px" BorderColor="#003476" AutoGenerateColumns="False" AllowSorting="true" OnSorting="gv_Sorting">
					        <AlternatingRowStyle Font-Size="Small"  BackColor="#fafafa"></AlternatingRowStyle>
					        <RowStyle Font-Size="Small" HorizontalAlign="Left" BackColor="#e4eff1"></RowStyle>
					        <HeaderStyle Font-Size="Medium" Font-Italic="true" Font-Bold="True" Wrap="False" HorizontalAlign="Center" BackColor="#aaacbb"></HeaderStyle> 
                         <Columns>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="App Name" ItemStyle-Wrap="false" ItemStyle-Width="10px" SortExpression="appName">
				                <ItemTemplate>
                                    <asp:Label ID="lblAppName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.appName")%>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="URL" ItemStyle-Wrap="false" ItemStyle-Width="5%">
				                <ItemTemplate>
                                    <asp:Label ID="lblURL" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.URL")%>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="" ItemStyle-Wrap="false">
				                <ItemTemplate>
				                    <ItemTemplate>
						                    <table width="100%">
						                        <tr valign="top">
						                            <td>    
						                                <asp:Panel ID="pnlTarget" runat="server">
                                                        <asp:Image ImageUrl="../images/plusViewDetails.gif" ID="imgCP" runat="server" />
                                                        </asp:Panel>
						                            </td>
						                            <td>
						                                <asp:Panel ID="ContentPanel" runat="server" style="overflow:hidden" Height="0"><%# DataBinder.Eval(Container, "DataItem.tblDateItem") %>
                                                        </asp:Panel>
						                            </td>
						                        </tr>
						                    </table>
                                            <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                                                TargetControlID="ContentPanel"
                                                ExpandControlID="pnlTarget"
                                                CollapseControlID="pnlTarget" 
                                                Collapsed="false"
                                                CollapsedSize="0"
                                                ExpandedImage="../images/minus.gif"
                                                CollapsedImage="../images/plusViewDetails.gif"
                                                ImageControlID="imgCP"
                                                ExpandedText="expanded"
                                                CollapsedText="collapsed"
                                                ExpandDirection="Vertical">
                                            </ajaxToolkit:CollapsiblePanelExtender>
                                        </ItemTemplate>
                                </ItemTemplate>
                            </asp:TemplateField>
				        </Columns>
                    </asp:GridView>
                </td>
            </tr>
            
         </table>
    </div>
    </form>
</body>
</html>

Open in new window

RelegenceAsked:
Who is Participating?
 
ApexCoConnect With a Mentor Commented:
More than likely it has something to do with using the % width in your page instead of fixed width.

Try this instead. You will probably need to tweak the width and the styles a bit, but it may fix the problem.
<div style="margin-top:10px;margin-left:5px; width:800px">
 
	<div align="center">
    	
        <div id="wrap1">
        <fieldset  id="filters" runat="server">
        	<div>
                <label for="cboComponents">Component:</label>
                <asp:DropDownList runat="server" ID="cboComponents" Width="180" style="z-index:0"></asp:DropDownList>
            </div>
            <div> 
            	<calendarControl:calendar id="calFrom" runat="server" LabelText="From: "></calendarControl:calendar>
            </div>
            <div>
            	<calendarControl:calendar id="calTo" runat="server" LabelText="To: "></calendarControl:calendar>
            </div>
            <div>
            	<asp:Button ID="btnSubmit" runat="server" CssClass="button" Text="Submit" OnClick="btnSubmit_Click" style="cursor:hand"/>
            </div>
            </fieldset>
        </div>
        
        <div id="divMessage" runat="server"></div> 
 
	
    <div id="wrap2">
    	<div>
        	<asp:GridView ID="gv" Runat="server" Width="100%" CellPadding="3"  
                                                BorderWidth="1px" BorderColor="#003476" AutoGenerateColumns="False" AllowSorting="true" OnSorting="gv_Sorting">
                                                <AlternatingRowStyle Font-Size="Small"  BackColor="#fafafa"></AlternatingRowStyle>
                                                <RowStyle Font-Size="Small" HorizontalAlign="Left" BackColor="#e4eff1"></RowStyle>
                                                <HeaderStyle Font-Size="Medium" Font-Italic="true" Font-Bold="True" Wrap="False" HorizontalAlign="Center" BackColor="#aaacbb"></HeaderStyle> 
                         <Columns>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="App Name" ItemStyle-Wrap="false" ItemStyle-Width="10px" SortExpression="appName">
                                                <ItemTemplate>
                                    <asp:Label ID="lblAppName" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.appName")%>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="URL" ItemStyle-Wrap="false" ItemStyle-Width="5%">
                                                <ItemTemplate>
                                    <asp:Label ID="lblURL" runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.URL")%>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField ItemStyle-VerticalAlign="Top" HeaderText="" ItemStyle-Wrap="false">
                                                <ItemTemplate>
                                                    <ItemTemplate>
                                                                    <table width="100%">
                                                                        <tr valign="top">
                                                                            <td>    
                                                                                <asp:Panel ID="pnlTarget" runat="server">
                                                        <asp:Image ImageUrl="../images/plusViewDetails.gif" ID="imgCP" runat="server" />
                                                        </asp:Panel>
                                                                            </td>
                                                                            <td>
                                                                                <asp:Panel ID="ContentPanel" runat="server" style="overflow:hidden" Height="0"><%# DataBinder.Eval(Container, "DataItem.tblDateItem") %>
                                                        </asp:Panel>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                            <ajaxToolkit:CollapsiblePanelExtender ID="cpe" runat="Server" 
                                                TargetControlID="ContentPanel"
                                                ExpandControlID="pnlTarget"
                                                CollapseControlID="pnlTarget" 
                                                Collapsed="false"
                                                CollapsedSize="0"
                                                ExpandedImage="../images/minus.gif"
                                                CollapsedImage="../images/plusViewDetails.gif"
                                                ImageControlID="imgCP"
                                                ExpandedText="expanded"
                                                CollapsedText="collapsed"
                                                ExpandDirection="Vertical">
                                            </ajaxToolkit:CollapsiblePanelExtender>
                                        </ItemTemplate>
                                </ItemTemplate>
                            </asp:TemplateField>
                                        </Columns>
                    </asp:GridView>
               </div>	
               
          </div>
          
     </div>

Open in new window

0
 
RelegenceAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.