User interface error with width - asp.net

Question

I have some issues regarding css and UI.
Seems like when I click a button and there is a postback or a validation in my website, my divs, tables, tds, tr.. stop having the value I give them and change on their own.
I hate having everything so perfectly structured and then a validation control screws it.
for example:
This two images
image 1
image 2
Before and after clicking an APPLY button, and causing validation.
As you see, it changes the width.
my code for that is this:
<table>
<tr>
<td style="width: 105px">
<dx:ASPxLabel ID="lblAlarmGroup" runat="server" Text="<%$ Resources:Master, GroupnameText %>"
CssClass="CamelCase" AssociatedControlID="cmbAlarmGroup">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox ID="cmbAlarmGroup" runat="server" ValueType="System.Int32" Width="150px"
DataSourceID="sqlDSAlarmGroups" TextField="GroupName" ValidationSettings-RequiredField-IsRequired="true"
ValueField="AlarmsListGroupsID" AutoPostBack="True" OnSelectedIndexChanged="cmbAlarmGroup_SelectedIndexChanged">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
<td style="width: 5px">
</td>
<td style="width: 105px">
<dx:ASPxLabel ID="lblAlarm" runat="server" Text="<%$ Resources:Master, AlarmText %>"
CssClass="CamelCase" AssociatedControlID="cmbAlarmsList">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbAlarmsList" runat="server" ValueType="System.Int32"
AutoPostBack="True" OnSelectedIndexChanged="cmbAlarmsList_SelectedIndexChanged"
TextField="value" ValueField="key" ValidationSettings-RequiredField-IsRequired="true">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
</tr>
<tr>
<td colspan="5" style="width: 525px">
<hr />
</td>
</tr>
<tr>
<td style="width: 105px">
<dx:ASPxLabel ID="lblSite" runat="server" Text="<%$ Resources:Master, SiteText %>"
CssClass="CamelCase" AssociatedControlID="cmbSite">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbSite" runat="server" ValueType="System.Int32"
OnSelectedIndexChanged="cmbSite_SelectedIndexChanged" TextField="value" ValueField="key"
AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
<td style="width: 5px">
</td>
<td style="width: 105px">
<dx:ASPxLabel ID="lblDepartment" runat="server" Text="<%$ Resources:Master, DepartmentText %>"
CssClass="CamelCase" AssociatedControlID="cmbDepartment">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbDepartment" runat="server" ValueType="System.Int32"
TextField="value" ValueField="key" OnSelectedIndexChanged="cmbDepartment_SelectedIndexChanged"
AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
</tr>
<tr>
<td style="width: 105px">
<dx:ASPxLabel ID="lblLine" runat="server" Text="<%$ Resources:Master, LineText %>"
CssClass="CamelCase" AssociatedControlID="cmbLine">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbLine" runat="server" TextField="value" ValueField="key"
ValueType="System.Int32" OnSelectedIndexChanged="cmbLine_SelectedIndexChanged"
AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
<td style="width: 5px">
</td>
<td style="width: 105px">
<dx:ASPxLabel ID="lblOperation" runat="server" Text="<%$ Resources:Master, OperationText %>"
CssClass="CamelCase" AssociatedControlID="cmbOperation">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbOperation" runat="server" ValueType="System.Int32"
TextField="value" ValueField="key" OnSelectedIndexChanged="cmbOperation_SelectedIndexChanged"
AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
</tr>
<tr>
<td style="width: 105px">
<dx:ASPxLabel ID="lblShift" runat="server" Text="<%$ Resources:Master, ShiftText %>"
CssClass="CamelCase" AssociatedControlID="cmbShift">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbShift" runat="server" TextField="value" ValueField="key"
ValueType="System.Int32" AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
<td style="width: 5px">
</td>
<td style="width: 105px">
<dx:ASPxLabel ID="lblStation" runat="server" Text="<%$ Resources:Master, StationText %>"
CssClass="CamelCase" AssociatedControlID="cmbStation">
</dx:ASPxLabel>
:
</td>
<td style="width: 155px">
<dx:ASPxComboBox Width="150px" ID="cmbStation" runat="server" TextField="value" ValueField="key"
ValueType="System.Int32" AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
</dx:ASPxComboBox>
</td>
</tr>
<tr>
<td colspan="5" style="width: 525px">
<hr />
</td>
</tr>
<tr>
<td colspan="2" style="width: 260px">
<dx:ASPxLabel ID="lblNoficationInterval" runat="server" Text="<%$ Resources:Master, NotificationSendIntervalText %>"
AssociatedControlID="aspxseNotificationInterval">
</dx:ASPxLabel>
:
</td>
<td style="width: 5px">
</td>
<td colspan="2" style="width: 260px">
<dx:ASPxSpinEdit ID="aspxseNotificationInterval" runat="server" Height="21px" Number="5"
MaxValue="10000" MinValue="5">
</dx:ASPxSpinEdit>
</td>
</tr>
<tr>
<td colspan="2" style="width: 260px">
<dx:ASPxLabel ID="lblExcalationInterval" runat="server" Text="<%$ Resources:Master, EscalationSendIntervalText %>"
AssociatedControlID="aspxseEscalationInterval">
</dx:ASPxLabel>
:
</td>
<td style="width: 5px">
</td>
<td colspan="2" style="width: 260px">
<dx:ASPxSpinEdit ID="aspxseEscalationInterval" runat="server" Height="21px" Number="10"
MaxValue="10000" MinValue="5">
</dx:ASPxSpinEdit>
</td>
</tr>
</table>
I've been having this issues all along my project and I didnt came with a solid solution.
Did this happen to any of you?
What should be the solution? Making CSS classes and assign EVERYTHING to them?
Thank you
EDIT:
I removed the validation from those 2 dropdowns but when I put a value in them, it occurs what you can see in the image.
And it only occurrs in that case; if the item selected is other, that UI dissorder is not happening
Image 3
Any clue?

Answer 1

It looks like you are using Dev Express controls. If you inspect the HTML that is rendered from the Dev Express controls using your browser's developer tools, you will see that they actually do not render HTML inputs or selects, instead they nest HTML inputs and selects inside of HTML tables.
The tables usual put the input control in one column and the validation error message in a different column. Dev Express exposes properties in which you can change the look of the validation error messages, but you won't be able to change how the error message is rendered (inside the table column).
One solution would be to set ErrorDisplayMode="None" on your controls, which will hide the validation messages. Then via JavaScript you can handle the validation event of your controls and display a custom error message.
For example:
<script type="text/javascript">
function cmbStation_Validation(s, e) {
alert(s.errorText);
}
</script>
<dx:ASPxComboBox Width="150px" ID="cmbStation" runat="server" TextField="value" ValueField="key" ValueType="System.Int32" AutoPostBack="True">
<DisabledStyle BackColor="LightGray" ForeColor="Black" />
<ClientSideEvents Validation="cmbStation_Validation">
<ValidationSettings ErrorDisplayMode="None">
</ValidationSettings>
</dx:ASPxComboBox>