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

问题

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

回答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 */

回答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.

回答3:

To manage the grid when it is in edit mode, please add scroll bar in the xaml code of div. When the edit mode will be called it will adjust into the scroll bar. Define a div, put the grid in that. Here is the code how to do it.

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

回答4:

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

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

回答5:

The following works :

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

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

来源：https://stackoverflow.com/questions/8680202/how-to-taking-control-of-size-of-gridview-when-its-on-edit-mode-and-its-not

标签

ASP.NET

css

gridview