Search code examples
htmlasp.netcsscss-floatalignment

How to align MultiView with TreeView in asp.net web forms?


I want to have a tree view on the left side of the screen along with a multiview which displays the content of the selected tree item on the right side of the screen. My problem is that I cannot seem to align the multiview such that it is to the right of the tree view. Its stuck to the bottom of the treeview. Here's a simplified version of what I have.

<body>
<form id="form1" runat="server">
<div>

    <asp:TreeView ID="TreeView1" runat="server">
        <Nodes>
            <asp:TreeNode Text="1" Value="1">
                <asp:TreeNode Text="1.1" Value="1.1"></asp:TreeNode>
                <asp:TreeNode Text="1.2" Value="1.2"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="2" Value="2"></asp:TreeNode>
        </Nodes>
    </asp:TreeView>

    <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
        <asp:View ID="View1" runat="server">
            <asp:Label ID="Label1" runat="server" Text="something here"></asp:Label>
        </asp:View>
    </asp:MultiView>

</div>
</form>
</body>

How do I align it to the right?


Solution

  • put both inside two div's and use css-style float:left for the first and float:right for the second with width it will work.

    <body>
    <form id="form1" runat="server">
    <div style="float:left;width:200px;">
    
        <asp:TreeView ID="TreeView1" runat="server">
            <Nodes>
                <asp:TreeNode Text="1" Value="1">
                    <asp:TreeNode Text="1.1" Value="1.1"></asp:TreeNode>
                    <asp:TreeNode Text="1.2" Value="1.2"></asp:TreeNode>
                </asp:TreeNode>
                <asp:TreeNode Text="2" Value="2"></asp:TreeNode>
            </Nodes>
        </asp:TreeView>
            </div>
            <div style="float:right; width:800px;">
        <asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            <asp:View ID="View1" runat="server">
                <asp:Label ID="Label1" runat="server" Text="something here"></asp:Label>
            </asp:View>
        </asp:MultiView>
    
    </div>
    </form>
    </body>