ASP.NET Web 窗体 - TreeView 节点错位答案

【问题标题】：ASP.NET Web Form - TreeView Nodes are dislocatedASP.NET Web 窗体 - TreeView 节点错位
【发布时间】：2018-03-24 21:43:51
【问题描述】：

TreeView (ASP) 控件中的最后一个节点显示在不同的位置，但层次逻辑仍然存在，我可以折叠该节点。

TreeView 嵌套在一个Panel 中，该Panel 位于<div> 中。我已经为它提供了足够的扩展空间，甚至最大化了TreeView 的大小，但同样的问题。现在经过几天在这里寻求帮助，因为我是网页设计的新手。此外，TreeView 没有 Scrollbar 属性。我正在使用 .NET 3.5

进行编码

代码：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Genographic._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #form1
        {
            height: 100%;
        }

        .bigDiv
        {
            width: 100%;
            height: 155px;
            background-color: red;
        }
        .imageDiv
        {
            width: 50%;
            height: 600px;
            background-color: white;
        }
        .labelDiv
        {
            width: 39%;
            height: 600px;
            background-color: control;
        }

        div > div
        {
            float: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="bigDiv">
        <asp:Panel ID="Panel_Menu" runat="server" BackColor="#336699" Width="100%" Height="155px">
            <center>
                <asp:Label ID="Label1" runat="server" Text="..."
                    Font-Size="X-Large" ForeColor="White"></asp:Label>
            </center>
            <br>
        </asp:Panel>
        <div class="imageDiv">
            <asp:Image ID="Image_Map" runat="server" Height="600px" Width="600px" ForeColor="#CCCCFF" />
        </div>
        <div class="labelDiv">
            <asp:Panel ID="Panel1" runat="server" Height="582px" Width="640px" Style="display: inline-block;">
                <br>
                <asp:Label ID="Label2" runat="server" Text="Level:      "></asp:Label>
                <br>
                <asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
                    ShowLines="True" Height="300px" Width="251px">
                    <SelectedNodeStyle ForeColor="#FF6600" />
                </asp:TreeView>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <asp:Label ID="Label3" runat="server" Text=""></asp:Label>
                <br>
                <asp:TreeView ID="TreeView_2" runat="server" ShowLines="True">
                    <SelectedNodeStyle ForeColor="#FF6600" />
                </asp:TreeView>
            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>

【问题讨论】：

您检查过生成的 HTML 吗？那将是我的第一步。如果这不能帮助您解决问题，那么也许您可以分享您的代码并告诉我们哪个浏览器出现这种行为？
@DaniDev TreeView 没有告诉任何 HTML 期望一些加密文本。我在另一个浏览器上也遇到了同样的行为。它看起来肯定无法容纳其子节点并在任何地方扩展，但正如我所说，指定了足够的空间。
取出 'Height="300px" '属性会怎样？
@DaniDev 同一个兄弟。我目前正在试验，将再次发布。

标签： asp.net treeview nodes

【解决方案1】：

我使用absolute 定位让它工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #form1
        {
            height: 100%;
        }

        .bigDiv
        {
            width: 100%;
            height: 155px;
            background-color: red;
        }
        .imageDiv
        {
            position: absolute;
            top: 180px;
            left: 510px;
            width: 600px;
            height: 100%;
            background-color: green;
        }
        .labelDiv
        {
            position:absolute;
            top: 180px;
            left: 5px;
            width: 500px;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="bigDiv" style="background-color: #3366CC">
        <center>
            <asp:Label ID="Label1" runat="server" Text="..."
                Font-Size="X-Large" ForeColor="White"></asp:Label>
        </center>
        <br>
        <div class="imageDiv">
            <asp:Image ID="Image_Map" runat="server" ForeColor="#CCCCFF" />
        </div>
        <div class="labelDiv">
            <asp:Label ID="Label2" runat="server" Text="Level:"></asp:Label>
            <br>
            <asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
                ShowLines="True" Width="416px">
                <SelectedNodeStyle ForeColor="#FF6600" />
            </asp:TreeView>
            <br>
            <br>
            <asp:Label ID="Label3" runat="server" Text="...:"></asp:Label>
            <br>
            <asp:TreeView ID="TreeView_H" runat="server" ShowLines="True">
                <SelectedNodeStyle ForeColor="#FF6600" />
            </asp:TreeView>
        </div>
    </div>
    </form>
</body>
</html>

【讨论】：