Last post Nov 09, 2017 05:48 PM by Mongol648
Member
63 Points
451 Posts
Nov 09, 2017 01:41 PM|Mongol648|LINK
All-Star
50641 Points
9835 Posts
Nov 09, 2017 04:45 PM|A2H|LINK
Mongol648 <p> <asp:GridView ID="GridView10" runat="server" AutoGenerateColumns="False"
Gridview will render as table at runtime. As per HTML specification, You cant have a table inside p tag, that is the reason it not working.
As a solution you can change the p tag to div like below
<div class="hoverinfo"> <span> <asp:Label ID="Label28" runat="server" Text="Hct:" Font-Bold="False"></asp:Label> <asp:Label ID="Label30" runat="server"></asp:Label></span> <div> <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" AllowSorting="True" AutoGenerateEditButton="True"> <Columns> <asp:BoundField DataField="AddressID" HeaderText="AddressID" /> <asp:BoundField DataField="AddressLine1" HeaderText="AddressLine1" /> <asp:BoundField DataField="AddressLine2" HeaderText="AddressLine2" /> <asp:BoundField DataField="City" HeaderText="City" /> <asp:TemplateField HeaderText="Period" SortExpression="Period"> <EditItemTemplate> <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("City") %>'></asp:TextBox> </EditItemTemplate> <ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("City") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2016CTP3ConnectionString %>" SelectCommand="SELECT TOP 10 [AddressID], [AddressLine1], [AddressLine2], [City] FROM [Person].[Address]"></asp:SqlDataSource> </div> </div>
Change your css like below
.hoverinfo { position: absolute; top: 15px; left: 15px; font-size: 28px; color: #ffffff; cursor: pointer; } .hoverinfo div { display: none; color: #000000; } .hoverinfo:hover div { background-color: rgba(255, 255, 255, 0.7); display: block; }
Nov 09, 2017 05:16 PM|Mongol648|LINK
Nov 09, 2017 05:31 PM|A2H|LINK
Nov 09, 2017 05:48 PM|Mongol648|LINK
Member
63 Points
451 Posts
Show gridview on mouseover/hover
Nov 09, 2017 01:41 PM|Mongol648|LINK
.hoverinfo {
position: absolute;
top: 15px;
left: 15px;
font-size: 28px;
color: #ffffff;
cursor: pointer;
}
.hoverinfo p {
display: none;
color: #000000;
}
.hoverinfo:hover p {
background-color: rgba(255, 255, 255, 0.7);
display: block;
}
<div>
<img src="https://yogifil.la/200/200" />
<div class="hoverinfo"> <span>i</span>
<p>3
<br>lines
<br>of text</p>
</div>
</div>
It works fine. I want to alter it to show a gridview on hover of a label.
This is what I have currently:
.hoverinfo {
font-size: 12px;
cursor: pointer;
}
.hoverinfo p {
display: none;
color: #000000;
}
.hoverinfo:hover p {
background-color:Gray;
display: block;
}
.hoverinfo:hover gridview
________________________________
<div>
<div class="hoverinfo">
<span> <asp:Label ID="Label28" runat="server" Text="Hct:" Font-Bold="False"></asp:Label>
<asp:Label ID="Label30" runat="server"></asp:Label></span>
<p>
<asp:GridView ID="GridView10" runat="server" AutoGenerateColumns="False"
DataSourceID="SqlDataSource23" CssClass="hoverinfo">
<Columns>
<asp:BoundField DataField="Results" HeaderText="Results"
SortExpression="Results" />
<asp:BoundField DataField="DrawTime" HeaderText="DrawTime"
SortExpression="DrawTime" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource23" runat="server"
ConnectionString="<%$ ConnectionStrings:user%>" SelectCommand="select a.Results, a.DrawTime
from
lab_order_details a
where
a.FIN = @fin
and a.OrderDetails = 'Hct.'
order by a.DrawTime asc">
<SelectParameters>
<asp:QueryStringParameter Name="fin" QueryStringField="fin" />
</SelectParameters>
</asp:SqlDataSource>
</p>
</div>
</div>
____________________________________________________________
Any help would be appreciated
All-Star
50641 Points
9835 Posts
Re: Show gridview on mouseover/hover
Nov 09, 2017 04:45 PM|A2H|LINK
Gridview will render as table at runtime. As per HTML specification, You cant have a table inside p tag, that is the reason it not working.
As a solution you can change the p tag to div like below
Change your css like below
Aje
My Blog | Dotnet Funda
Member
63 Points
451 Posts
Re: Show gridview on mouseover/hover
Nov 09, 2017 05:16 PM|Mongol648|LINK
I can see pointer change but the DIV does not show.
All-Star
50641 Points
9835 Posts
Re: Show gridview on mouseover/hover
Nov 09, 2017 05:31 PM|A2H|LINK
Aje
My Blog | Dotnet Funda
Member
63 Points
451 Posts
Re: Show gridview on mouseover/hover
Nov 09, 2017 05:48 PM|Mongol648|LINK
Thank you!