RadPanelBar expansion causing <div> to shift

2 posts, 1 answers
  1. Ron
    Ron avatar
    3 posts
    Member since:
    Aug 2010

    Posted 23 Dec 2010 Link to this post

    I have a sample webform with 7 <DIV>. 6 <DIV> nested in one outer <DIV> as shown in the code snippet below. The problem is when I expand a PanelBar on the top row, it shifts the <DIV> area below it to the right instead of vertically downwards. This is illustrated in the figures attached. How can I overcome this problem?

    <body>
          
        <form id="form1" runat="server">
          
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
        <div style=" width:33%; float:left; background-color:Gray;" id="div1">
            <telerik:RadPanelBar ID="RadPanelBar1" runat="server" Width="100%">
                <Items>
                <telerik:RadPanelItem Text="div1">
                <Items>
                  
                <telerik:RadPanelItem Value="div1">
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ItemTemplate>
                </telerik:RadPanelItem>
                </Items>
                </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
        <div style=" width:33%; float:left; background-color:Green;" id="div2">
            <telerik:RadPanelBar ID="RadPanelBar2" runat="server" Width="100%">
                <Items>
                <telerik:RadPanelItem Text="div2">
                <Items>
                  
                <telerik:RadPanelItem Value="div2">
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ItemTemplate>
                </telerik:RadPanelItem>
                </Items>
                </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
        <div style=" width:33%; float:left; background-color:Navy;" id="div3">
        <telerik:RadPanelBar ID="RadPanelBar3" runat="server" Width="100%">
                <Items>
                <telerik:RadPanelItem Text="div3">
                <Items>
                  
                <telerik:RadPanelItem Value="div3">
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ItemTemplate>
                </telerik:RadPanelItem>
                </Items>
                </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar></div>
        <div style=" width:33%; float:left; background-color:Purple;" id="div4">
        <telerik:RadPanelBar ID="RadPanelBar4" runat="server" Width="100%">
                <Items>
                <telerik:RadPanelItem Text="div4">
                <Items>
                  
                <telerik:RadPanelItem Value="div4">
                <ItemTemplate>
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ItemTemplate>
                </telerik:RadPanelItem>
                </Items>
                </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar></div>
        <div style=" width:33%; float:left; background-color:Teal;" id="div5"></div>
        <div style=" width:33%; float:left; background-color:Fuchsia;" id="div6"></div>
        </div>
        </form>
    </body>
  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 24 Dec 2010 Link to this post

    Hello Ron,

    The reason that DIV 4 shifts to the right is because you have each PanelBar enclosed they're own div and each div is floating. So when you expand the DIV 1, DIV 4 floats to the right because DIV 1 has grown in height and DIV 4 can now occupy the right side. That is how floating elements work, they just float around unless the item before doesn't occupy that space. If your PanelBar's are supposed to show in one of the columns, I would suggest just having three floating divs, and then placing the PanelBar one after the other inside of their respective div. If you do it that way, when you expand DIV 1, DIV 4 will still appear below it.

    This is what I'm describing, in case my explanation was confusing:

    <div id="DIV1" styles="float:left;">
        <telerik:RadPanelBar ID="pb1" runat="server"></telerik:RadPanelBar>
        <telerik:RadPanelBar ID="pb4" runat="server"></telerik:RadPanelBar>
    </div>
    <div id="DIV2" styles="float:left;">
        <telerik:RadPanelBar ID="pb2" runat="server"></telerik:RadPanelBar>
        <telerik:RadPanelBar ID="pb5" runat="server"></telerik:RadPanelBar>
    </div>
    <div id="DIV3" styles="float:left;">
        <telerik:RadPanelBar ID="pb3" runat="server"></telerik:RadPanelBar>
        <telerik:RadPanelBar ID="pb6" runat="server"></telerik:RadPanelBar>
    </div>

    I hope that helps.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top