The usual technique for applying extenders that might conflict/interfere with each other is to wrap them in differentPanels. For example - you could extend aPanel withRoundedCorners and then place thatPanel inside anotherPanel extended byHoverMenu.
Thanks,
Ted
Interesting. Thanks Ted, I'll give it a shot.
Ok I tried doing that but it didn't work. If I wrap the panel that the hover menu targets, then it just doesn't work... and if I put the new panel inside of the hover menu targeted panel, then the rounded corners are inside of the panel (so you see square corners outside of it).
So is it not possible?
You could style the ajax hover menu with snazzy rounded corners like Stu Nicholls' cssplay demo.
New beta 1.0 sample aspx, followed by StyleSheet.css
<asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server"> <div id="xsnazzy" > <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> Item ID:<%# Eval("ItemID")%> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>
/*Hover Menu*/.popupMenu {position:absolute;visibility:hidden;background-color:#F5F7F8;opacity:.9;filter: alpha(opacity=90);} .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #08c; border-right:1px solid #08c;} .xb1 {margin:0 5px; background:#08c;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;} #xsnazzy {width:60%; text-align: center;} .popupHover {/* background-image:<span class='val'>url(images/header-opened.png)</span>;background-repeat:<span class='val'>repeat-x</span>;*/background-position:left top;background-color:#F5F7F8;}
Thanks Silver, I'll give this a try!
The solution for beta1 above is dated. So, we'll revisit this. Here's a plug n' play piece of code that replaces the gridview portion of the current hovermenu beta2 sample, followed by StyleSheet.css changes. This is a CSS-only solution for rounded corners. This also makes moot the system bug that's a topic in another thread. If you grab this code and toss it into the sample, your output should look like this:
<asp:GridView BackColor="Azure" GridLines="None" ShowHeader="False" Width="100%" ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ItemID" DataSourceID="ObjectDataSource1"> <Columns> <asp:TemplateField> <EditItemTemplate> <asp:Panel ID="Panel9" runat="server" Width="80%"> <table width="100%"> <tr> <td width="30%">Title:<br /><asp:TextBox Font-Bold="true" ID="TextBox1" runat="server" Text='<%# Bind("Title")%>' Width="100"></asp:TextBox></td> <td width="55%">Desc:<br /><asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description")%>' Width="150"></asp:TextBox></td> <td width="15%">Pri:<br /><asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Priority")%>' Width="40"></asp:TextBox></td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme1" runat="Server" TargetControlID="Panel9" PopupControlID="PopupMenu" HoverCssClass="popupHover" PopupPosition="Right" /> <asp:Panel ID="PopupMenu" runat="server" CssClass="snazzypopupMenu" Width="80"> <div id="xsnazzy2" > <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="True" CommandName="Update" Text="Update"> </asp:LinkButton> <br /> <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"> </asp:LinkButton> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div><!--end xsnazzy2--> </asp:Panel> </EditItemTemplate> <ItemTemplate> <asp:Panel CssClass="snazzypopupMenu" ID="PopupMenu" runat="server"><!--<div style="border:1px outset white;">moot--> <div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b> <div class="xboxcontent"> <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit"> </asp:LinkButton> <br /> <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"> </asp:LinkButton> </div> <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div><!--end xsnazzy--> </asp:Panel> <asp:Panel ID="Panel9" runat="server"> <table width="100%"> <tr> <td width="25%"><asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title")))%>'></asp:Label></td> <td width="50%"><asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description")))%>'></asp:Label></td> <td width="25%"><asp:Label ID="Label3" runat="server" Text='<%# Eval("Priority")%>'></asp:Label></td> </tr> </table> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="hme2" runat="Server" HoverCssClass="snazzypopupHover" PopupControlID="PopupMenu" PopupPosition="Left" TargetControlID="Panel9" PopDelay="25"> </ajaxToolkit:HoverMenuExtender> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView>
StyleSheet.css
/*Hover Menu*/.popupMenua {/*for roundedcorners-hovermenu demo*/position:absolute;visibility:hidden;background-color:red;background:transparent;/*hide corners*/opacity:.9;filter: alpha(opacity=90);}.popupMenu {position:absolute;visibility:hidden;background-color:#F5F7F8;opacity:.9;filter: alpha(opacity=90);}.snazzypopupMenu {position:absolute;visibility:hidden;background-color:#F5F7F8;opacity:.9;filter: alpha(opacity=90);} .xtop, .xbottom {display:block; background:transparent; font-size:1px;} .xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;} .xb1, .xb2, .xb3 {height:1px;} .xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #08c; border-right:1px solid #08c;} .xb1 {margin:0 5px; background:#08c;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#fff; border:0 solid #08c; border-width:0 1px;} #xsnazzy {width:13%; text-align: center;} #xsnazzy2 {width:80%; text-align: center;}.popupHover { position:relative;/*fix IE cold-spot between hover & grid*/background-image:url(images/header-opened.png);background-repeat:repeat-x;background-position:left top;background-color:#F5F7F8;}.snazzypopupHover { position:relative;/*fix IE cold-spot between hover & grid*//* background-image:<span class='val'><span class='val'>url(images/header-opened.png)</span></span>;background-repeat:<span class='val'><span class='val'>repeat-x</span></span>;*/background-position:left top;background-color:#F5F7F8;}
No comments:
Post a Comment