locked
Show gridview on mouseover/hover RRS feed

  • Question

  • User-883855585 posted
    I started with this piece of code:

    .hoverinfo {
    ;
    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>

    &nbsp;<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
    Thursday, November 9, 2017 1:41 PM

All replies

  • User2103319870 posted

    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>
    
                    &nbsp;<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 {
                    ;
                    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;
                    }

    Thursday, November 9, 2017 4:45 PM
  • User-883855585 posted
    I have tried what you suggest. The second DIV will not display. Any other suggestions?

    I can see pointer change but the DIV does not show.
    Thursday, November 9, 2017 5:16 PM
  • User2103319870 posted
    • Per the provided markup code is working fine with out any issue.  I have tested the code before posting here. Can you please double check your mark up is valid. You can also see a working demo of code 

    Thursday, November 9, 2017 5:31 PM
  • User-883855585 posted
    I apologize, you are correct. Started from scratch and it works.

    Thank you!
    Thursday, November 9, 2017 5:48 PM