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>