-2

我有一些关于 CSS 和 UI 的问题。似乎当我单击 abutton并且我的网站中有回发或验证时，我的divs, tables, tds, tr.. 停止拥有我给他们的价值并自行更改。我讨厌让一切结构如此完美，然后验证控制将其拧紧。

例如：

这两张图片 图片 1 图片 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 类并将所有内容分配给它们？谢谢

编辑：

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

图 3 有什么线索吗？

4

1 回答 1

0

看起来您正在使用 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>
于 2013-06-18T13:47:13.900 回答