Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


Arrange panels left to right in flow layout

Posted on 2006-03-29
Medium Priority
Last Modified: 2008-03-03
Can anyone tell me why panels stack on top of each other when contained inside of a flow layout container and how to work around it? If I put labels or controls in a container with flow layout they simply flow left to right until they run out of room and then start a second row.

Here is what I am trying to accomplish.

1.   I have an asp.net page with vb that in flow layout.
2.   I have a panel in this page.
3.   Inside of this panel there are six other panels that contain datagrids and therefore will be of unknown height. These panels have a width of 45% of the parent panel.
4.   Of the six panels I may potentially display only 1 or all or any number between one and six.
5.   What I want is for the panels to flow left to right and create another row of panels once two have been displayed.
6.   Example: I need to display three of the panels. So what I would like to have happen is one row of two panels and a second row that contains the third panel on the left.
7.   Theoretically flow layout should allow me to accomplish this but seems to work different for panels than it does for other controls. Other controls flow left to right but the panels just seem to stack on top of each other for some reason.

One other note, I will not use grid layout. I have no idea how tall the panels could be and so cannot use grid layout. Plus, I personally hate the whole grid layout thing as it is a pain in the butt to work with.

Please let me know if more detail is needed on what I am trying to accomplish.
Question by:throttlenet
  • 4
  • 2

Expert Comment

ID: 16323065
Create tables for organize your form, in the layout mode. You can draw different tables, one inside other tables. The rows and columns can setting as Server Controls. Select the row or column that you desire, and then press right click, and choose "Run as Server Control". When the row or column set as "Server Control", you can use properties and events.

Author Comment

ID: 16323132
This is what I have already done. Here is a sample of what I am looking to do

<form id="Form1" method="post" runat="server">
            <TABLE id=Table1 style="WIDTH: 640px" cellSpacing=1 cellPadding=1 width=640 border=1 RUNAT="server" MS_POSITIONING="FlowLayout">
                  <TR RUNAT="server" MS_POSITIONING="FlowLayout">
                        <td WIDTH="100%" RUNAT="server" MS_POSITIONING="FlowLayout">
                              <asp:Panel id=Panel1 runat="server" Width="100%" MS_POSITIONING="FlowLayout">      
                                    <table WIDTH="100%" RUNAT="server" MS_POSITIONING="FlowLayout">
                                          <tr RUNAT="server" MS_POSITIONING="FlowLayout">
                                                <td RUNAT="server" MS_POSITIONING="FlowLayout">
                                                      <asp:Panel ID=Panel2 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                      <asp:Panel ID=Panel3 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                      <asp:Panel ID=Panel4 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                      <asp:Panel ID=Panel5 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>
                                                      <asp:Panel ID=Panel6 WIDTH="300px" RUNAT="server" BORDERWIDTH="1">Panel</asp:Panel>                                                
                                    <asp:Button id=Button1 runat="server" Text="Button"></asp:Button>
                                    <asp:Button id=Button3 runat="server" Text="Button"></asp:Button>
                                    <asp:Button id=Button4 runat="server" Text="Button"></asp:Button>      

Accepted Solution

noamattd earned 2000 total points
ID: 16323236
The better, cleaner way to do it is to use CSS.  Set the "float" property of all childpanels to be "left" except for the last, one, where it should be set to "right".
<style type="text/css">
/* color, background, padding, etc */

/* color,width ,  background, padding, etc */

/* color, background, padding, etc */

<asp:Panel id="parent" CssClass="parentPanel">
  <asp:Panel id="child1" CssClass="childPanel"></asp:panel>
    <asp:Panel id="child6" CssClass="rightMostChildPanel"></asp:panel>

If you're displaying the panels dynamically, just set the CssClass of the final one you want to show to be "rightMostChildPanel" in code.
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.


Author Comment

ID: 16323244
In the code above the buttons arrange left to right without a problem but the panels sit on top of each other and I cannot get two panels on the same which is what I believe should happen.

I added a lot of extra MS_Postioning tags to see if that would so please don't view it as I don't know what I am doing. I am simply playing around in the code to see what I can do to force the behavior I want.

Please let me know how I need to modify the above code to get the look I want.

Here is a visual of what I need.

Panel2, Panel3, and Panel5 are set visible to true. This is a rough sketch what it should look like.

                         { width=640 }
 | ------------------------     -------------------------  |
 | |      Panel 1           |     |    Panel 2              | |
 | |                           |     |                             | |
 | ------------------------     -------------------------  |
 | ------------------------                                      |
 | |   Panel 5              |                                      |
 | ------------------------                                      |

Author Comment

ID: 16323698

That does exactly what I need. It's clean and easy. I was hoping to be able to do this through the style sheet!

I have one question and then I will give you the points.

Is this cross-browser compatible? Is the float property recognized by all of the major browsers?

Expert Comment

ID: 16324021

Yes, all the major browsers support float.  If you've got any more questions about what browser supports what CSS you should take a look at http://www.westciv.com/style_master/academy/browser_support/index.html.  Click any one of the underlined headers in those lists for nice little tables.

Author Comment

ID: 16324051
"Sweet, sweet nectar. Its like my pool is tearing ass around the back yard, but it's standing still, still waters run deep."

- Karl, ATHF

Thanks for the help and the link to the browser support information.

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
Is your OST file inaccessible, Need to transfer OST file from one computer to another? Want to convert OST file to PST? If the answer to any of the above question is yes, then look no further. With the help of Stellar OST to PST Converter, you can e…
The Relationships Diagram is a good way to get an overall view of what a database is keeping track of. It is also where relationships are defined. A relationship specifies how two tables connect to each other. As you build tables in Microsoft Ac…
Suggested Courses
Course of the Month13 days, 12 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question