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>1 Answer, 1 is accepted
0
Accepted
Cori
Top achievements
Rank 2
Rank 2
answered on 24 Dec 2010, 02:32 PM
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:
I hope that helps.
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.