Possible ways of arranging DevExpress controls within a page

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>

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" />

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" />

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>

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>

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