I was working with some code posted in
Steve Clement's excellent article entitled
ASP.NET AJAX RSS NewsReader on code project. The idea is really great. The application defines an asp:Panel within which he embeds a call to
Dmitry's
RSSToolkit to pull an RSS feed and uses this to populate an asp:DataList. This in turn, defines two asp:Panels as part of its ItemTemplate definition which are bound as targets to to an ajaxToolkit:collapsiblepanelextender.
The effect is really nice - on IE. On FireFox, however, the layout is completely screwed up. I have tried playing with the layout but I think it has something to do with the databinding and not the layout. If anyone has any ideas on how to address this
issue, please let me know. Thanks :)
Here is an image of what it looks like on IE:
And here is it on FireFox:
And here is the markup that is being used to produce this page:
Thanks for that - the CSS changes you suggested addressed the main layout issues.
I am not able to fully resolve the issues in the project I downloaded from CodeProject and I think I can solve it now by laying out a new page from scratch.
I face the same problem. I have a datalist and am binding some Panels in the ItemTemplate of the datalist. I have a collapsible panel extender which collapses and expands a panel on the click of a label. During run time, there might be a number of rows created
in the datalist. So there will be more than one such collapsible panels and labels to control the state of the panel. It work perfectly in IE6. but when I try to use it in firefox, only the first panel is bound to the extender and rest of the panels are not
bound to the extender and the label also has its default text and is not linked to the collapsible panel extender. Can someone please help me in this? I have pasted the code below.
ASP.NET AJAX is a free framework for quickly creating
a new generation of more efficient, more interactive and highly-personalized
Web experiences that work across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</td><td width="22%">
<asp:ListBox ID="ListBox1" runat="server" Height="50%" Width="80%"></asp:ListBox>
bartonf
Member
36 Points
13 Posts
Collapsible panel and Datalist - works for IE but not for Firefox
Jun 03, 2007 08:19 PM|LINK
I was working with some code posted in Steve Clement's excellent article entitled ASP.NET AJAX RSS NewsReader on code project. The idea is really great. The application defines an asp:Panel within which he embeds a call to Dmitry's RSSToolkit to pull an RSS feed and uses this to populate an asp:DataList. This in turn, defines two asp:Panels as part of its ItemTemplate definition which are bound as targets to to an ajaxToolkit:collapsiblepanelextender.
The effect is really nice - on IE. On FireFox, however, the layout is completely screwed up. I have tried playing with the layout but I think it has something to do with the databinding and not the layout. If anyone has any ideas on how to address this issue, please let me know. Thanks :)
Here is an image of what it looks like on IE:
And here is it on FireFox:
And here is the markup that is being used to produce this page:
<
asp:ScriptManager ID="ScriptManager1" runat="server" /> <div id="content-header"> <h1>Blog Roll</h1> </div> <div id="content-container"> <div id="content-side1"> <ul class="list-of-links"> <li id="list1" class="current"> <asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="1" OnCommand="lnkOptions_Command" OnClientClick="linklist_onclick(1);">Barton's Blog</asp:LinkButton></li> <li id="list2"> <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="2" OnCommand="lnkOptions_Command" OnClientClick="linklist_onclick(2);">ASP.NET Latest</asp:LinkButton></li> <li id="list3"> <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument="3" OnClientClick="linklist_onclick(3);" OnCommand="lnkOptions_Command">C# Latest</asp:LinkButton></li> <li id="list4"> <asp:LinkButton ID="LinkButton4" runat="server" CommandArgument="4" OnClientClick="linklist_onclick(4);" OnCommand="lnkOptions_Command">Vista Latest</asp:LinkButton></li> <li id="list5"> <asp:LinkButton ID="LinkButton5" runat="server" CommandArgument="5" OnClientClick="linklist_onclick(5);" OnCommand="lnkOptions_Command">ASP.net AJAX Latest</asp:LinkButton></li> </ul> </div>
<div id="content-main"> <asp:UpdatePanel ID="updateMain" runat="server" UpdateMode="conditional"> <Triggers> <asp:AsyncPostBackTrigger ControlID="LinkButton1" /> <asp:AsyncPostBackTrigger ControlID="LinkButton2" /> <asp:AsyncPostBackTrigger ControlID="LinkButton3" /> <asp:AsyncPostBackTrigger ControlID="LinkButton4" /> <asp:AsyncPostBackTrigger ControlID="LinkButton5" /> </Triggers> <ContentTemplate> <h2> <asp:Label ID="lblHeader" runat="server">Defined at Runtime</asp:Label></h2> <hr /> <asp:Panel ID="BlogPanel1" runat="server"> <rss:rssdatasource id="RssDataSource1" runat="server" maxitems="0" Url=""> </rss:rssdatasource> <asp:DataList ID="BlogList1" runat="server" DataSourceID="RssDataSource1"> <ItemTemplate> <asp:Panel ID="panelHeader" runat="server" CssClass="collapsePanelHeader"> <span style="float: left;"> <%# Eval("title") %> <br /> <%# Eval("pubDate") %> </span> <asp:Image ID="Image1" runat="server" Style="float: right;" ImageUrl="~/images/expand_blue.jpg" /> </asp:Panel> <asp:Panel ID="Panel1" runat="server" CssClass="collapsePanel"> <%# Eval("description") %>(
<asp:HyperLink ID="hlMore" runat="server" NavigateUrl='<%# Eval("link") %>' Target="_blank" Text="read more"></asp:HyperLink>) </asp:Panel> <ajaxT:CollapsiblePanelExtender ID="cpe1" runat="server" targetcontrolid="Panel1" CollapsedSize="0" collapsed="true" expandcontrolid="panelHeader" collapsecontrolid="panelHeader" suppresspostback="true" imagecontrolid="Image1" ExpandDirection="Vertical" expandedimage="~/images/collapse_blue.jpg" collapsedimage="~/images/expand_blue.jpg" /> <hr style="border-bottom: 1px dotted #B2B2B2; margin: 0px;" /> </ItemTemplate> </asp:DataList> </asp:Panel> </ContentTemplate> </asp:UpdatePanel> </div>
</div> <%-- UPDATE PROGRESS PANEL --%> <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0" DynamicLayout="true"> <ProgressTemplate> <div id="updProgress"> <img alt="" src="images/indicator.gif" /> <span>Working on your request...</span> </div> </ProgressTemplate> </asp:UpdateProgress>CollapsiblePanel Firefox datalist
Osiris209
Member
568 Points
133 Posts
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Jun 03, 2007 09:28 PM|LINK
Hi Barton
I cant actually see the image for the firefox rendering - perhaps the link is broken? :(
I havent looked at this for some time but will do ASAP and get back to you.
Thx
Steve
bartonf
Member
36 Points
13 Posts
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Jun 04, 2007 04:14 AM|LINK
Steve,
The images are posted on picasa so it may be that one has to have a google account in order to view them inline.
I made them publically viewable at http://picasaweb.google.com/barton.friedland/AspNetAjaxErrors.
Thanks very much for looking at this.
Regards,
Barton
bartonf
Member
36 Points
13 Posts
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Jul 02, 2007 05:13 PM|LINK
Steve,
Any ideas on this? Have you been able to reproduce the issue?
Regards,
Barton
kirtid
Contributor
2610 Points
658 Posts
Microsoft
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Jul 03, 2007 09:27 PM|LINK
Do you set the height of the header panel and the width of the content panel in the css?
Program Manager, Silverlight and ASP.NET AJAX
Microsoft
This posting is provided "AS IS" with no warranties, and confers no rights.
bartonf
Member
36 Points
13 Posts
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Jul 10, 2007 06:14 AM|LINK
Thanks for that - the CSS changes you suggested addressed the main layout issues.
I am not able to fully resolve the issues in the project I downloaded from CodeProject and I think I can solve it now by laying out a new page from scratch.
senthilJe
Member
2 Points
1 Post
Re: Collapsible panel and Datalist - works for IE but not for Firefox
Feb 04, 2009 04:28 AM|LINK
I face the same problem. I have a datalist and am binding some Panels in the ItemTemplate of the datalist. I have a collapsible panel extender which collapses and expands a panel on the click of a label. During run time, there might be a number of rows created in the datalist. So there will be more than one such collapsible panels and labels to control the state of the panel. It work perfectly in IE6. but when I try to use it in firefox, only the first panel is bound to the extender and rest of the panels are not bound to the extender and the label also has its default text and is not linked to the collapsible panel extender. Can someone please help me in this? I have pasted the code below.
<asp:DataList ID="dlImages" runat="server" DataSourceID="ObjectDataSource1" Width="100%" RepeatDirection="Vertical" OnItemDataBound="dlImages_ItemDataBound">
<ItemTemplate>
<cc1:TabContainer ID="TabContainer1" runat="server" EnableTheming="False" CssClass="TabContainer">
<cc1:TabPanel ID="TabPanel1" runat="server" BorderStyle="None" EnableTheming="False" CssClass="TabPanel">
<HeaderTemplate>
<div style="height:27px; margin-left:0px; vertical-align:bottom ; width:150px; background-image: url(/Images/GreenTab.jpg)">
<asp:Label ID="Label4" CssClass="MidInfoSearchLabel" runat="server" Text='<%# Eval ("Location") %>'>
</asp:Label>
</div>
</div>
</HeaderTemplate>
<ContentTemplate>
<table width="100%" cellpadding="0" cellspacing="0" >
<tr><td style="width:78%">
<asp:Panel ID="panelimage" Height="150px" Width ="100%" BackColor="#bfbd9b" runat="server" >
<%-- Table for displaying thumbnail image and image details --%>
<table width=100% >
<tr ><td width=30%>
<asp:Image ID="imgThumbnail" runat="server" /></td>
<td width="70%">
<table width=100%>
<tr><td align=left><asp:Label ID="lblUrl" Visible=false CssClass="MidInfoSearch" runat="server" Text='<%# Eval ("Pictureurl") %>'></asp:Label><asp:Label ID="lblUser" runat="server" CssClass="MidInfoSearch" Text='<%# Eval ("TAGS") %>'></asp:Label>
</td>
<td> </td>
</tr>
<tr><td align=left> <asp:Label ID="lblDesc" runat="server" CssClass="MidInfoSearch" Text='<%# Eval ("[DESCRIPTION]") %>'>></asp:Label>
</td>
<td> </td></tr>
<tr><td align=left><asp:Label ID="lbladded" runat="server" CssClass="MidInfoSearch" Text="added "></asp:Label><asp:Label ID="lblCreatedDate" runat="server" CssClass="MidInfoSearch" Text='<%# Eval ("CREATIONDATE") %>' ></asp:Label><asp:Label ID="lblBy" CssClass="MidInfoSearch" runat="server" Text=" by "></asp:Label><asp:Label ID="lblUserImage" runat="server" CssClass="MidInfoSearch" Text='<%# Eval ("FIRSTNAME") %>'></asp:Label>
</td>
<td align="Left"><asp:Label ID="lblCat" CssClass="MidInfoSearch" Text="Category " runat="server"></asp:Label><asp:Label ID="lblCategory" CssClass="MidInfoSearch" Text='<%# Eval ("Category") %>' runat="server"></asp:Label>
</td></tr>
</table>
</td></tr>
<tr style="height:20px"><td style="height:20px">
</td></tr>
</table>
</asp:Panel></td>
<td width="22%">
<asp:Panel runat=server ID="pnlSidePane" Height="150px" Width="100%" BackColor="#969167" >
<table width=100%>
<tr><td align=right style="height:5px" >
</td></tr>
<tr><td align=right style="color:white"><asp:HyperLink ID="hlEdit" runat="server" CssClass="LinksInSearch" Text="edit"></asp:HyperLink> | <asp:HyperLink ID="hlUpload" CssClass="LinksInSearch" Text="upload" runat="server"></asp:HyperLink>
</td></tr>
<tr><td align=right ><asp:HyperLink ID="hlOthers" runat="server" CssClass="LinksInSearch" Text="others like this(6)"></asp:HyperLink>
</td></tr>
<tr><td align=right ><asp:HyperLink ID="hlAttachments" runat="server" CssClass="LinksInSearch" Text="attachments(5)"></asp:HyperLink>
</td></tr>
<tr><td align=right ><asp:HyperLink ID="hlComments" runat="server" CssClass="LinksInSearch" Text="comments(100)"></asp:HyperLink>
</td></tr>
</table>
</asp:Panel>
</td></tr>
<tr><td colspan="2">
<cc1:CollapsiblePanelExtender ID="cpe" runat="server"
Enabled="True"
TargetControlID="Panel1"
SuppressPostBack ="true"
ScrollContents ="true"
Collapsed ="True"
ImageControlID ="Image1"
ExpandControlID="Label1"
CollapseControlID="Label1"
TextLabelID="Label1"
CollapsedText="more"
ExpandedText="Less">
</cc1:CollapsiblePanelExtender>
<asp:Panel ID="Panel1" runat="server" Height="415px"
Width="100%" >
<table><tr><td width="78%">
ASP.NET AJAX is a free framework for quickly creating
a new generation of more efficient, more interactive and highly-personalized
Web experiences that work across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
ASP.NET AJAX is a free framework for quickly creating a new generation of more
efficient, more interactive and highly-personalized Web experiences that work
across all the most popular browsers.<br />
</td><td width="22%">
<asp:ListBox ID="ListBox1" runat="server" Height="50%" Width="80%"></asp:ListBox>
</td></tr></table>
</asp:Panel><br/>
</td></tr>
<tr><td colspan="2" align="right">
<asp:Label ID="Label1" runat="server" Text="Label" Width="100px" ></asp:Label>
</td></tr>
</table>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender2" TargetControlID ="pnlSidePane" runat=server Corners="Right" ></cc1:RoundedCornersExtender>
<tr style="height:20px"><td style="height:20px"></td></tr>
<cc1:RoundedCornersExtender ID="RoundedCornersExtender1" TargetControlID ="panelimage" runat=server Corners= "BottomLeft" ></cc1:RoundedCornersExtender>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
</ItemTemplate>
</asp:DataList>
Collapsible Panel firefox