【发布时间】：2015-04-08 13:43:52
【问题描述】：
我有一个 gridview，当处于编辑模式时，它可以在 1 列中显示 1 或 2 个控件，具体取决于在另一列中选择的下拉菜单。一个控件是文本框，另一个是标签。我首先有文本框，然后是文本框旁边的标签。我的问题是当文本框和标签显示时，标签的文本延伸到下一列。我希望列宽与显示的控件一样宽。 我该怎么做？
这是我对网格的标记：
<div id="DeviceGridWrapper">
<asp:TextBox ID="RecipientID" runat="server" Visible="false"> </asp:TextBox>
<asp:GridView ID="DeviceInfoGridView" runat="server"
AutoGenerateColumns="False" Caption="Device Information"
CaptionAlign="Top" CssClass="grid" RowStyle-Wrap="true"
HorizontalAlign="Left" ShowFooter="True" PageSize="5"
ShowHeaderWhenEmpty="False"
OnRowCancelingEdit="DeviceInfoGridView_RowCancelingEdit"
OnRowDataBound="DeviceInfoGridView_RowDataBound"
OnRowDeleting="DeviceInfoGridView_RowDeleting"
OnRowEditing="DeviceInfoGridView_RowEditing"
OnRowUpdating="DeviceInfoGridView_RowUpdating" AllowPaging="True"
ondatabound="DeviceInfoGridView_DataBound"
onrowcommand="DeviceInfoGridView_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Device ID">
<ItemTemplate>
<asp:Label ID="digvLblDeviceID" runat="server" Text='<%# Bind("DeviceID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
<ItemTemplate>
<asp:Label ID="digvLblDeviceName" runat="server" Text='<%# Bind("DeviceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="digvEditDeviceName" runat="server" Visible="false" Text='<%# Bind("DeviceName") %>'></asp:Label>
<asp:DropDownList ID="digvDDListDeviceName" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single"></asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameEdit" runat="server"
ControlToValidate="digvDDListDeviceName" ValidationGroup="EditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="digvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameInsert" runat="server" InitialValue="0"
ControlToValidate="digvDDListDeviceNameInsert" ValidationGroup="InsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Service Provider">
<ItemTemplate>
<asp:Label ID="digvLblServiceName" runat="server" Text='<%# Bind("ServiceName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="digvEditServiceName" runat="server" Visible="false" Text='<%# Bind("ServiceName") %>'></asp:Label>
<asp:DropDownList ID="digvDDListServiceName" runat="server" ClientIDMode="Static"
OnSelectedIndexChanged="DeviceInfoGridView_SelectedIndexChanged_EditServiceName" AutoPostBack="true" EnableViewState="true"
data-placeholder="Choose service…" class="chosen-single"></asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLServiceNameEdit" runat="server"
ControlToValidate="digvDDListServiceName" ValidationGroup="EditDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="digvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLServiceNameInsert" runat="server" InitialValue="0"
ControlToValidate="digvDDListServiceNameInsert" ValidationGroup="InsertDeviceValidation"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<ItemTemplate>
<asp:Label ID="digvLblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="digvTxtBoxAddress" runat="server" Text='<%# Bind("Address") %>' Width="50%" ClientIDMode="Static"></asp:TextBox>
<asp:Label ID="digvEditAddressExt" runat="server" Visible="false" Text='<%# Bind("ServiceExtension") %>' Width="40%"
ClientIDMode="Static"></asp:Label>
<asp:RequiredFieldValidator ID="ReqValueAddressEdit" runat="server"
ControlToValidate="digvTxtBoxAddress" ValidationGroup="EditDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
<asp:CustomValidator ID="CustomValAddressEdit" runat="server" ControlToValidate="digvTxtBoxAddress" CssClass="message-error"
ErrorMessage="*" ClientValidationFunction="ValidateAddressEdit" EnableClientScript="true"
ValidationGroup="EditDeviceValidation" ></asp:CustomValidator>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="digvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqValueAddressInsert" runat="server"
ControlToValidate="digvTxtBoxAddressInsert" ValidationGroup="InsertDeviceValidation"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Active">
<ItemTemplate>
<asp:Label ID="digvLblActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="digvDDListActive" runat="server" Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
<asp:ListItem>Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="digvDDListActiveInsert" runat="server">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Action" ShowHeader="False" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Button ID="digvEditButton" runat="server" CausesValidation="True" CommandName="Edit"
Text="Edit" CssClass="gridActionbutton" ValidationGroup="EditDeviceValidation">
</asp:Button>
<asp:Button ID="digvDeleteButton" runat="server" CausesValidation="False" CommandName="Delete"
Text="Delete" CssClass="gridActionbutton" OnClientClick="return confirm('Are you sure you want to delete this Device Information?')" >
</asp:Button>
</ItemTemplate>
<EditItemTemplate>
<asp:Button ID="digvUpdateButton" runat="server" CausesValidation="True" ValidationGroup="EditDeviceValidation" CommandName="Update"
Text="Update" CssClass="gridActionbutton"></asp:Button>
<asp:Button ID="uigvCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel" CssClass="gridActionbutton"></asp:Button>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="digvAddButton" runat="server" CommandName="Add" Text="Add Device" Width="90%" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="InsertDeviceValidation">
</asp:Button>
</FooterTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<tr>
<th>Device ID</th>
<th>Device</th>
<th>Service Provider</th>
<th>Address</th>
<th>Active</th>
<th>Action</th>
</tr>
<tr>
<td colspan="7" style="text-align:center;">
No Devices were found for you. Devices can be added by clicking the 'Add Device' Button.
</td>
</tr>
<tr>
<td></td>
<td>
<asp:DropDownList ID="digvDDListDeviceNameInsert" runat="server" ClientIDMode="Static"
data-placeholder="Choose device…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLDeviceNameEmpty" runat="server" InitialValue="0"
ControlToValidate="digvDDListDeviceNameInsert" ValidationGroup="InsertDeviceValidationEmpty"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</td>
<td>
<asp:DropDownList ID="digvDDListServiceNameInsert" runat="server" ClientIDMode="Static" Enabled="false"
data-placeholder="Choose service…" class="chosen-single">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqValueDDLServiceNameEmpty" runat="server" InitialValue="0"
ControlToValidate="digvDDListServiceNameInsert" ValidationGroup="InsertDeviceValidationEmpty"
ErrorMessage="Selection required." CssClass="message-error-dropdown">
</asp:RequiredFieldValidator>
</td>
<td>
<asp:TextBox ID="digvTxtBoxAddressInsert" runat="server" ClientIDMode="Static"></asp:TextBox>
<asp:RequiredFieldValidator ID="ReqValueAddressEmpty" runat="server"
ControlToValidate="digvTxtBoxAddressInsert" ValidationGroup="InsertDeviceValidationEmpty"
ErrorMessage="Required field." CssClass="message-error">
</asp:RequiredFieldValidator>
</td>
<td>
<asp:DropDownList ID="digvDDListActiveInsert" runat="server">
<asp:ListItem Selected="True">Yes</asp:ListItem>
<asp:ListItem>No</asp:ListItem>
</asp:DropDownList>
</td>
<td>
<asp:Button ID="digvAddButtonEmpty" runat="server" CommandName="Add" Text="Add Device" Width="90%" CausesValidation="true"
CssClass="gridActionbutton" ValidationGroup="InsertDeviceValidationEmpty">
</asp:Button>
</td>
</tr>
</EmptyDataTemplate>
</asp:GridView>
</div>
这是我当前的网格样式：
.grid
{background-color: #fff;
border: solid 2px #000;
border-collapse:collapse;
color: #FFF; overflow:auto
}
.grid td {
padding-left: 5px;
color: #000;
font-size: medium;
}
.grid th {
color: #000;
background: #99C3BB;
font-size: medium;
font-weight: bold;
}
.grid caption {
color: #000;
text-align:center;
font-weight:bold;
font-size:1.2em;
padding: 2px;
background-color: #99C3BB;
border: 2px solid black;
}
.grid table tr td {
color: #000;
font-size: small;
padding: 5px;
}
#DeviceGridWrapper
{
height: 250px;
width: 100%;
padding-bottom: 10px;
}
出现问题的列是“地址”列。当仅文本框显示宽度时，以编程方式设置为“90%”。当显示文本框和标签时，文本框设置为“50%”，标签为“40%”。它们是并排的，这就是我想要的。我需要将地址列加宽以容纳两个控件，以便标签不会延伸到下一列。
有没有办法将地址列设置为同时容纳两个控件的宽度？
谢谢。
【问题讨论】：