locked
Gridview Textbox Width RRS feed

  • Question

  • User-1485433867 posted

    I have read dozens of posts about this problem but nothing is working for me.   I just cannot change the width of a Textbox in a Gridview.

    I can tell the column width is correct because the HeaderText is centered.  Maybe someone can help.  The toPrep template field is what I am trying to change.

    Thank you,

    Marc

    <div id="ScrollList" style="height:400px;overflow-y:auto;overflow-x:hidden">

    <asp:GridView ID="PrepGrid" runat="server" AutoGenerateColumns="False" CellPadding="4" headerstyle-cssclass="centerHeaderText"
    ForeColor="#333333" GridLines="None" Font-Name="Verdana" Font-Names="Verdana" Width="900px" Height="25px">
    <AlternatingRowStyle BackColor="White" ForeColor="#333333" Height="25px" />
    <Columns>

    <asp:TemplateField HeaderText="Sel">
    <ItemTemplate>
    <asp:CheckBox ID="fPrint" runat="server" AutoPostBack="true" />
    </ItemTemplate>
    </asp:TemplateField>

    <asp:BoundField DataField="idItem" HeaderText="Item">
    <ItemStyle Width="200px"></ItemStyle>
    <ControlStyle></ControlStyle>
    <HeaderStyle></HeaderStyle>
    <ItemStyle></ItemStyle>
    </asp:BoundField>

    <asp:BoundField DataField="ordQty" HeaderText="Quantity">
    <ItemStyle HorizontalAlign="Center"></ItemStyle>
    <ItemStyle></ItemStyle>
    </asp:BoundField>

    <asp:BoundField DataField="ordUnit" HeaderText="Pick Unit">
    <ItemStyle Width="140px"></ItemStyle>
    <ItemStyle></ItemStyle>
    </asp:BoundField>

    <asp:TemplateField HeaderText="To Prep" ItemStyle-Width="500px">
    <ItemTemplate>
    <asp:TextBox ID="toPrep" runat="server" width="500px" />
    </ItemTemplate>
    <EditItemTemplate>
    </EditItemTemplate>
    <ControlStyle Width="500px"></ControlStyle>
    <ItemStyle Width="500px"></ItemStyle>
    </asp:TemplateField>

    </Columns>
    <EditRowStyle BackColor="#999999" />
    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
    <HeaderStyle BackColor="#f9a11b" Font-Bold="True" ForeColor="White" Font-Size="Small" Height="25px" />
    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Height="25px" />
    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
    <SortedAscendingCellStyle BackColor="#E9E7E2" />
    <SortedAscendingHeaderStyle BackColor="#506C8C" />
    <SortedDescendingCellStyle BackColor="#FFFDF8" />
    <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
    </asp:GridView>
    </div>

    Friday, August 17, 2018 4:08 PM

Answers

  • User-1485433867 posted

    After two days I finally solved this.  I was taking all of your suggestions and they were having no effect.  On a lark, I switched from DEBUG to RELEASE and then it worked!  What the hell?  Switched back to DEBUG and that started working too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 26, 2018 2:45 PM

All replies

  • User409696431 posted

    Start testing from the basics:

    Create a new blank page: no styles, no master page.

    Put a GridView on it.  Set the textbox width in your template field.

    Does it work?  (It should, if the resulting gridview table can fit across the page.)

    Let us know.

    Friday, August 17, 2018 4:55 PM
  • User-893317190 posted

    Hi  mmieher,

     The problem is caused by your  controlstyle  which also specifies the width of your textbox. The only thing you need to do is to change both the controlstye  and the width of your textbox, or just remove one of them and specifies your textbox’s width.

     Below is my code.

    <asp:TemplateField HeaderText="To Prep" ItemStyle-Width="400px" ItemStyle-HorizontalAlign="Center">
    <ItemTemplate>
    <asp:TextBox ID="toPrep" runat="server"   />
    </ItemTemplate>
    <EditItemTemplate>
    </EditItemTemplate>
    <ControlStyle Width="200px"></ControlStyle>
    
    </asp:TemplateField>
    

    The result.

    Best regards,

    Ackerly Xu

    Tuesday, August 21, 2018 1:39 AM
  • User-1485433867 posted

    Thank you, Ackerly.  

    The column width changes, bu the TextBox is always the same width.  I am guessing it has something to do with my Master Page and/or Bootstrap.

    Tuesday, August 21, 2018 5:04 PM
  • User-893317190 posted

    Hi mmieher ,

    You could use F12 developer tool to help you check the width of textbox. In my case , after I change the  width property of controlstyle , the width changes.

    Below is my code.

    <asp:TemplateField HeaderText="To Prep" ItemStyle-Width="500px" ItemStyle-HorizontalAlign="Center">
    <ItemTemplate>
    <asp:TextBox ID="toPrep" runat="server"   />
    </ItemTemplate>
    <EditItemTemplate>
    </EditItemTemplate>
    <ControlStyle Width="50px"></ControlStyle>
    
    </asp:TemplateField>

    The result.

    Best regards ,

    Ackerly Xu

    Wednesday, August 22, 2018 1:54 AM
  • User-1485433867 posted

    I think you meant Width="500px" in <ControlStyle> 

    Changing <ControlStyle> does adjust the width of the column, however, nothing changes the width of the asp:Textbox  "toPrep" in the column.  Always the default width it appears, unless column width is less than Textbox width.

    F12 says the element is 600px, but visually it is not.

    <input name="ctl00$MainContent$PrepGrid$ctl02$toPrep" type="text" id="MainContent_PrepGrid_toPrep_0" style="width:600px;">

    Thursday, August 23, 2018 12:24 AM
  • User465171450 posted

    When you look at F12 to determine what the width is, are you looking at what the CSS defines it? Or are you looking a the Computer layout? Have you turned on the bounding box to visualize if the box is rendering outside the bounds of the column?

    Thursday, August 23, 2018 1:28 AM
  • User-1485433867 posted

    When I hover over the textbox in F12 mode, it says it is 280 x 26.  However, the html for the Gridview is:

    <td style="width:600px;">
    <input name="ctl00$MainContent$PrepGrid$ctl02$toPrep" type="text" id="MainContent_PrepGrid_toPrep_0" style="width:600px;">

    </td>

    Thursday, August 23, 2018 2:33 PM
  • User-1485433867 posted

    After two days I finally solved this.  I was taking all of your suggestions and they were having no effect.  On a lark, I switched from DEBUG to RELEASE and then it worked!  What the hell?  Switched back to DEBUG and that started working too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 26, 2018 2:45 PM