How to take control over the size of the Gridview when it is in edit mode, but it is not?

Question

I would have a custom Gridview control. In the gray frame (its div tag) whether the Gridview was in the editmode or not, I used Gridview Width and Styles, but this did not work. How to do it?

.GridViewStyle
{
 /*It didn't work*/
 width:50%;
}

Gridview when it is in edit mode

Gridview when it is not in edit mode

Answer 1

The problem, of course, is the size of the text fields <input />in edit mode

Add an element <EditRowStyle>to gridview to give the edit line a CSS class

<asp:GridView ID="GridView1" runat="server">
    ...
    <EditRowStyle CssClass="GridViewEditRow" /> <%-- add this --%>
</asp:GridView>

Now you can control the size of text fields using CSS

.GridViewEditRow input[type=text] {width:50px;} /* size textboxes */
.GridViewEditRow select {width:50px;} /* size drop down lists */

Answer 2

, , ( ), , . , ( , gridview), , , .

Firebug ( Firefox), (Internet Explorer),... , , .

Answer 3

, , xaml div. , . div, . , .

<div style="width:100px; height:100px; overflow:scroll;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>

Answer 4

<asp:BoundField HeaderText="Title" ControlStyle-Width="100px" DataField="Title" />

use the ControlStyle-Width attribute and assign the width to the column

Answer 5

The following works:

<asp:TemplateField HeaderText="Salary" ControlStyle-CssClass="cssWidth"></asp:TemplateField>

<style type="text/css"> 
    .cssWidth {
        width : 150px;
    }     
</style>