Keeping DevExpress controls inline on ASP.NET web forms

Question

I've just replaced Telerik controls in a small web project with DevExpress controls, but now, despite my adding an inline display div as container, these controls are no longer rendered inline. What could have caused this, and what can I do to get these errant controls back inline?

<div style="display: inline;">
    <label>
        Department:</label>
    <dx:ASPxComboBox ID="deptCombo" runat="server" AutoPostBack="false" ValueField="DeptId" TextField="DeptName" Width="250px" OnSelectedIndexChanged="deptCombo_SelectedIndexChanged">
    </dx:ASPxComboBox>
    <label>
        Production Date:</label>
    <dx:ASPxDateEdit ID="productionDatePicker" runat="server" DisplayFormatString="{0:dd/MM/yyyy}" EditFormat="Custom" EditFormatString="dd/MM/yyyy" 
        ondatechanged="productionDatePicker_DateChanged">
    </dx:ASPxDateEdit>
</div>

Answer 1

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.

[CSS] add this line on your css

.DXControlsInline {display: inline-table;}

[ASPx] add CssClass="DXControlsInline" on controls you want to make inline

<dx:ASPxLabel ID="ckArboviralDiseaseChikungunyaOtherSpecify" runat="server"  CssClass="DXControlsInline" Text="Specify:"></dx:ASPxLabel>
<dx:ASPxTextBox ID="tbArboviralDiseaseChikungunyaOther" CssClass="DXControlsInline"  ClientInstanceName="tbArboviralDiseaseChikungunyaOther" runat="server" Width="350px"></dx:ASPxTextBox> 

Source : http://www.theedgesearch.com/2016/04/how-to-arrange-devexpress-controls.html

Answer 2

Sounds like the DevX controls have some CSS that you'll need to override.

For starters, I'd try adding the !important flag to the style:

<div style="display: inline !important;">

If that doesn't work, switch back to the RadControls. They are far superior :)

Answer 3

The task is not directly related to our controls and can be implemented without them in a similar way. In the case of ASPxTextBox , define a CssClass property to it with the following rule:

<dx:ASPxTextBox ID="txt1" runat="server" Width="170px" CssClass="txtStyle"></dx:ASPxTextBox>

.txtStyle {
    display: inline-block;
}

I've prepared a small sample to demonstrate how it works. See also CSS display Property.

UPDATED:

When a caption is specified for ASPxTextBox , it is rendered as a table. That is why the suggested approach does not work in this case. To resolve this issue, I suggest you place each text box in a div element and set the 'display' property for it. Let me know if this helps.

Source