いろいろ備忘録日記

主に .NET とか Go とか Flutter とか Python絡みのメモを公開しています。

TreeViewの罫線が途切れる件 (ShowLines, ImageUrl, HorizontalPadding, VerticalPadding, css)

C# asp.net


最近、ASP.NETをやっているのですが
(ASP.NETはかなり初心者です。)
以下、自分用のメモです。


TreeViewを利用していて、ShowLinesプロパティをTrueに設定して
ノードにImageUrlとかを設定して表示すると、罫線が途切れる事があります。


こんな感じ。ブラウザはIE8です。

        <asp:TreeView ID="TreeView1" runat="server" ShowLines="true">
            <NodeStyle ImageUrl="~/images/text.png" ForeColor="Black" HorizontalPadding="5px" />
            <SelectedNodeStyle ForeColor="White" BackColor="Blue" />
            <HoverNodeStyle Font-Underline="true" />            
            <Nodes>
                <asp:TreeNode Text="RootNode1" Value="RootNode1">
                    <asp:TreeNode Text="SubNode1" Value="SubNode1"></asp:TreeNode>
                    <asp:TreeNode Text="SubNode2" Value="SubNode2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="RootNode2" Value="RootNode2">
                    <asp:TreeNode Text="SubNode3" Value="SubNode3"></asp:TreeNode>
                    <asp:TreeNode Text="SubNode4" Value="SubNode4"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="RootNode3" Value="RootNode3">
                    <asp:TreeNode Text="SubNode3" Value="SubNode3"></asp:TreeNode>
                    <asp:TreeNode Text="SubNode4" Value="SubNode4"></asp:TreeNode>
                </asp:TreeNode>
            </Nodes>
        </asp:TreeView>



で、ネットで情報を探してみたら以下のようなページを発見。


TreeView配下のtd下のdivに対して、強制的にheightを設定しろとのこと。
最終的に以下のようにしたらうまくいきました。

.tree td div { height: 100% !important }


CSSを設定後の見た目。ブラウザはIE8です。

    <style>
        .tree td div { height: 100% !important }            
    </style>
    
    <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" CssClass="tree">
        <NodeStyle ImageUrl="~/images/text.png" ForeColor="Black" HorizontalPadding="5px" />
        <SelectedNodeStyle ForeColor="White" BackColor="Blue" />
        <HoverNodeStyle Font-Underline="true" />            
        <Nodes>
            <asp:TreeNode Text="RootNode1" Value="RootNode1">
                <asp:TreeNode Text="SubNode1" Value="SubNode1"></asp:TreeNode>
                <asp:TreeNode Text="SubNode2" Value="SubNode2"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="RootNode2" Value="RootNode2">
                <asp:TreeNode Text="SubNode3" Value="SubNode3"></asp:TreeNode>
                <asp:TreeNode Text="SubNode4" Value="SubNode4"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="RootNode3" Value="RootNode3">
                <asp:TreeNode Text="SubNode3" Value="SubNode3"></asp:TreeNode>
                <asp:TreeNode Text="SubNode4" Value="SubNode4"></asp:TreeNode>
            </asp:TreeNode>
        </Nodes>
    </asp:TreeView>


追記）
NodeStyleにVerticalPaddingを設定すると、やっぱり隙間が空いてしまうみたい。
これは仕方ないか・・。


もっとうまいやり方知ってる方いらっしゃったら教えて下さい m(_ _)m


追記２）
以下のURLにて、SurferOnWwwさんという方がノードのテキストが2行以上ある場合でも
接続線をちゃんと表示する方法を記述されています。勉強になりました m(_ _)m

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
過去の記事については、以下のページからご参照下さい。