Current filter:
                                You should refresh the page.
                                Support Center
                                2
                                  • Sometimes people face questions related to modifying page layout or DevExpress controls arrangement. The most popular questions are:
                                    - why when I place two ASPxButton controls, they are arranged vertically, but when I put standard asp:Button controls, they are aligned horizontally?
                                    - what is the recommended way of creating a page layout?

                                You must  log in  or  register  to leave comments

                                1 Solution

                                12

                                Answers to these and similar questions can be found after we examine possible solutions:

                                Almost all of DevExpress controls are rendered as tables. The main advantage of this approach is that this way provides good cross-browser capability, since when nested divs are used, it might be hard to synchronize their positions and sizes for all browsers. However, using tables allows end-users to get rid of this problem.
                                The following description is enough to answer the first question:

                                If there are two tables on a page with the following layout, they will be rendered under each other:

                                [HTML]
                                <table style="border: solid 1px; width: 100px;"> <tr> <td> table 1 </td> </tr> </table> <table style="border: solid 1px; width: 100px;"> <tr> <td> table 2 </td> </tr> </table>

                                Picture: two tables

                                Two ASPxButtons are rendered as tables. That is why when you simply put them onto a page, they'll be rendered under each other. This happens because tables are defined as block elements, and all block elements are arranged vertically: Block formatting contexts.

                                [ASPx]
                                <dx:ASPxButton ID="btn1" runat="server" Text="ASPxButton" /> <dx:ASPxButton ID="btn2" runat="server" Text="ASPxButton" />

                                Picture: two ASPxButtons

                                Many standard ASP controls don't have complex rendering, and they are rendered as inline elements. For example, asp:Button is rendered as the <input type="button"> tag , which is inline:

                                [ASPx]
                                <asp:Button ID="btn3" runat="server" Text="Button" /> <asp:Button ID="btn4" runat="server" Text="Button" />

                                Picture: two asp:Buttons

                                Note: the full list of block and inline elements is available at XHTML Reference.

                                If you wish to arrange controls within a page, you can do this in one of the following ways:

                                1. Change their block box model to the inline box via the display CSS style property:

                                You can define the CSS class with the display property and assign it to required controls. This style will be applied to the control's main HTML element (usually a table):

                                [CSS]
                                .btnInline { display: inline-table; }
                                [ASPx]
                                <dx:ASPxButton ID="btn5" runat="server" CssClass="btnInline" Text="ASPxButton" /> <dx:ASPxButton ID="btn6" runat="server" CssClass="btnInline" Text="ASPxButton" />


                                Picture: two inline ASPxButtons

                                By the way, this approach can be even applied to the ASPxGridView:


                                Picture: two inline ASPxGridViews

                                2. You can put required controls into div tags with the float CSS style property. You can also assign this property to the control's main HTML:

                                [CSS]
                                .btnFloat { float: left; }
                                [ASPx]
                                <dx:ASPxButton ID="btn7" runat="server" CssClass="btnFloat" Text="ASPxButton" /> <div class="btnFloat"> <dx:ASPxButton ID="btn8" runat="server" Text="ASPxButton" /> </div>

                                Picture: two ASPxButtons floated to the left

                                3. Another, commonly used, solution is to use tables to arrange controls within a page:

                                [ASPx]
                                <table> <tr> <td> <dx:ASPxButton ID="btn9" runat="server" Text="ASPxButton" /> </td> <td> <dx:ASPxButton ID="btn10" runat="server" Text="ASPxButton" /> </td> </tr> </table>

                                Picture: two ASPxButtons in the table

                                4. Starting with version 12.2 we have introduced a new ASPxFormLayout that provides a convenient way to arrange controls within a page. Take a look at the Create Web Forms in minutes with the new ASP.NET Form Layout control video to get started.


                                It is not easy to answer what the best way to arrange controls is. But usually the most preferable way is to use tables. For example, if you find out that the ASPxComboBox (or any other control with a drop-down window) has its drop-down window detached, that means that, probably, you have the control in an absolutely (or relatively) positioned div with some specific styles. Such kind of layout might be rendered differently in different browsers, but when using tables, the layout will stay the same in all browsers.

                                See Also:
                                Comparison of normal flow, floats, and absolute positioning

                                P.S. Thank you for reading this article. We hope that you'll find the information useful.

                                Please rate the article and leave feedback so that we improve this article.

                                Thank you,
                                Vest

                                • Bruce L. Scheffler 10.31.2013

                                  I have searched the web for information on centering, etc. of buttons within the html5 rules. All I found was plenty of bad mouthing of users that wanted to just understand how the it worked without any ideas on how to apply the rules or even how they worked.
                                  This is probably the best reason I have used your tools for the last few years. You have never told me I was a bad programmer or did not know anything, you just gave me the insight of how to apply your tools and in a lot of cases even code to make it work. Where you did offer suggestions is was never with the thought I did not know what I was doing but another option to look at.
                                  If I was not an old geezer and could meet your high standards for professionalism I would love to have had the chance to work for your company. I can only hope that other companies would take time to watch your teams in action. Just maybe they would learn how to work with developers and encourage others to go for it.
                                  Thank you for all the time you take to teach us how to use the tools you have created and even how to use the tools Microsoft has developed. And you do it without an arrogant attitude, that is just so cool in my book.
                                  Its a real shame that the US Government did not hire your company to write the Heath Care website, it would have run like it should have...
                                  Ah one can dream...
                                  Thanks again...

                                  Bruce L. Scheffler
                                  Security +/Network+/CompTIA A+
                                  45RMS\RMOI
                                  United States Air Force

                                • Thomas Staudte 10.31.2013

                                  Dear DevExpress Support Team,

                                  I just want to second that! Thank you for the great job you're doing and the help you provide!

                                  Thomas Staudte

                                • Hello,

                                  Thank you for your comments.
                                  We are happy to hear about your experience with our products and services.

                                • Vlаd 02.23.2014

                                  Yeah, guys, you are the best!!!

                                • Andrew Morstad 04.08.2014

                                  They have been the best ever since I started using their controls 13 years ago!!! We are small development shop and have been able to out class the our big competitors with DevEx controls which pays big dividends for us cause we can charge half what big competitors do and enjoy 4 times the profit margin. Sandwiched between Microsoft's schizophrenic Developer strategies and us the developer customers takes serious smarts and skill to handle the way they do. Kudos to the DevExpress support and development teams!!

                                You must  log in  or  register  to leave comments

                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners