How to taking control of size of Gridview when its on edit mode and its not?

Question

I would have my Gridview User Control In gray frame(its div tag) whether Gridview is in editmode or not, I did use Gridview's Width and Styles but it didn't work. How do I do this?

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

Gridview when its in edit mode

Gridview when its not in edit mode

Answer 1

The issue is certainly the size of the <input /> text boxes when in edit mode

Add the <EditRowStyle> element to your gridview to give the edit row a CSS class

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

Now you can control the size of the textboxes with CSS

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

Answer 2

It seems some controls that are visible in edit mode (the textbox inputs mainly) have a certain width, making the entire grid too wide. Your browser will do the best it can to set the width of the table (which is what a gridview renders to), but if the contents are too wide, it will have to make it wider than you wanted it to.

Inspect the textbox elements with Firebug (if you're using Firefox), Developer Tools (Internet Explorer), ... See if they have a width set to them.