Home / Questions / 280230
Accepted
Huntzberger
Asked: 2020-07-20 11:12:29 +0800 CST 2020-07-20 11:12:29 +0800 CST

How to avoid changing the size of the columns in edit mode of a Gridview

  • 772

I have the following Gridview, in which the user can edit the columns, but when editing the table the columns change their size, my question is how to avoid that. Thank you

enter image description here

enter image description here

<Columns>
<asp:TemplateField HeaderText="27" SortExpression="27">
<EditItemTemplate>
<asp:TextBox ID="L27" runat="server" Text='<%# Eval("27") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label27" runat="server" Text='<%# Bind("27") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="28" SortExpression="28">
<EditItemTemplate>
<asp:TextBox ID="L28" runat="server" Text='<%# Eval("28") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label28" runat="server" Text='<%# Bind("28") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
...etc
</Columns>

asp.net

1 Answers

  1. Best Answer

    It is because when rendering the Textbox webcontrol it does so as an HTML input element that by default in browsers already has a default style (for example that width).

    Then you should use a CSS style to "format as you need and require" the HTML input control that renders the Textbox webcontrol. For this you need to apply the CSS class in the CssClass attribute, which you then have to place in the page or recommendation in the appropriate .css file of your project.

    Example

    <Columns>
    <asp:TemplateField HeaderText="27" SortExpression="27">
    <EditItemTemplate>
         <asp:TextBox ID="L27" runat="server" Text='<%# Eval("27") %>' CssClass="ejemplo-input"></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
         <asp:Label ID="Label27" runat="server" Text='<%# Bind("27") %>'></asp:Label>
    </ItemTemplate>

    Where you can put in the .css file of your project (or if you have several in the most appropriate)

    .ejemplo-input{
    width: 10px;
    padding: 2px 4px;
}

    You could also add a css style to the entire gridview column, so you can have a style for the borders or centering of the input inside the HTML table cell.

    I hope it helps or guides you.

    • 0