用户界面宽度错误答案

【问题标题】：User interface error with width用户界面宽度错误
【发布时间】：2013-06-18 13:20:34
【问题描述】：

我有一些关于 CSS 和 UI 的问题。好像当我单击button 并且我的网站中有回发或验证时，我的divs、tables、tds、tr.. 停止拥有我给他们的价值并改变他们自己的。我讨厌让一切结构如此完美，然后验证控制就搞砸了。

例如：

这两张图片 image 1 image 2

在单击APPLY 按钮并导致验证之前和之后。

如你所见，它改变了宽度。

我的代码是这样的：

<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">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </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>

我在整个项目中一直遇到这个问题，但我没有提供可靠的解决方案。这发生在你们身上吗？解决方案应该是什么？制作 CSS 类并将所有内容分配给它们？谢谢

编辑：

我从这 2 个下拉列表中删除了验证，但是当我在其中输入一个值时，它会出现您在图像中看到的内容。它只发生在那种情况下；如果选择的项目是其他项目，则不会发生 UI 混乱

Image 3 有什么线索吗？

【问题讨论】：

对于所有刚刚对此类问题使用-1的人，请先发布解决方案。你的懒惰值得-5。
您能否再澄清一下您的编辑？抱歉，我很难弄清楚你想说什么。

标签： asp.net css validation user-interface

【解决方案1】：

您似乎正在使用 Dev Express 控件。如果您使用浏览器的开发人员工具检查从 Dev Express 控件呈现的 HTML，您会发现它们实际上并不呈现 HTML 输入或选择，而是将 HTML 输入和选择嵌套在 HTML 表中。

表格通常将输入控件放在一列中，将验证错误消息放在另一列中。 Dev Express 公开了一些属性，您可以在其中更改验证错误消息的外观，但您将无法更改错误消息的呈现方式（在表格列内）。

一种解决方案是在您的控件上设置 ErrorDisplayMode="None"，这将隐藏验证消息。然后通过 JavaScript，您可以处理控件的验证事件并显示自定义错误消息。

例如：

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

【讨论】：

所以如果我添加验证，那会一直发生吗？太糟糕了。有没有办法指定验证要添加的额外列，以便我已经可以为它腾出空间？