locked
GridView column width css RRS feed

  • Question

  • User1510859543 posted

    I have the following class for a column in a GridView but it can stretch beyond 33% width when someone has a long entry where the sentence does not break within the 33% width (e.g. pasted in a url).  This pushes the total GridView beyond 100% of the screen width.  Is there any way to control this?  Below is CSS that I have tried.

        <style>
            .maxwide33 {
                width: 33%;
                max-width: 33%;
            }
        </style>
    Wednesday, December 6, 2017 6:25 PM

Answers

  • User-335504541 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">dlchase</g>,

    Please try to use the following code:

        <style>
              .break{
                  word-break:break-word;
                  word-wrap:break-word;             
                  display:block;
                  width:33vw
              }        
        </style>
    
                            <asp:TemplateField HeaderText="Question" SortExpression="Question" ItemStyle-VerticalAlign="Top"  > 
                                <HeaderStyle CssClass="header" />
                                <EditItemTemplate>
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </EditItemTemplate>
                                <ItemTemplate>         
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </ItemTemplate>                         
                                <ItemStyle VerticalAlign="Top"  CssClass="break" />
                            </asp:TemplateField>
    

    And the result:

    In chrome:

    In FireFox:

    In Edge:

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 12, 2017 6:14 AM

All replies

  • User475983607 posted

    Set the GridView's table-layout to fixed.

    .myGridView {
        table-layout: fixed;
    }
    Wednesday, December 6, 2017 6:32 PM
  • User2103319870 posted

    when someone has a long entry where the sentence does not break within the 33% width (e.g. pasted in a url).  This pushes the total GridView beyond 100% of the screen width.  Is there any way to control this

    If you are ok with wrapping the text in gridview then you can try with below solution. 

    You need to subscribe to GridView RowDatabound event and then apply the css styles to your respective columns in GridView.

    You can try with the below code

    /// <summary>
            /// Handles the RowDataBound event of the GridView6 control.
            /// </summary>
            /// <param name="sender">The source of the event.</param>
            /// <param name="e">The <see cref="GridViewRowEventArgs"/> instance containing the event data.</param>
            protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    //here change the column index as per your GridVIew Design
                    e.Row.Cells[0].Attributes.Add("style", "word-break:break-all;word-wrap:break-word;");
                }
            }

    Complete Sample Code:

    HTML:

    <asp:GridView ID="GridView6" runat="server" AutoGenerateColumns="False" DataKeyNames="description"
                    ForeColor="#333333" GridLines="Both" Width="150px" 
                    onrowdatabound="GridView6_RowDataBound">
                    <Columns>
                        <asp:TemplateField HeaderText="Description" ItemStyle-Width="100px" HeaderStyle-CssClass="blue-top">
                            <ItemTemplate>
                                <asp:Label ID="lblDescription" runat="server" Text='<%#Eval("description") %>' Width="33%"></asp:Label>
                            </ItemTemplate>
                            <EditItemTemplate>
                                <asp:TextBox ID="G_txtDescription" runat="server" Width="70px" Text='<%#Eval("description") %>'></asp:TextBox>
                                <asp:RequiredFieldValidator ID="RequiredFieldValidator_inside1" runat="server" ErrorMessage="*"
                                    ForeColor="Red" ControlToValidate="G_txtDescription" ValidationGroup="inside"></asp:RequiredFieldValidator>
                            </EditItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                </asp:GridView>

    Adjust the width of column as per your gridview

    C#:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
    
                    //Assign the data to GridView
                    GridView6.DataSource = this.Get_FirstName();
                    //Bind the Grid
                    GridView6.DataBind();
                }
            }
    
            //Populate some dummy data
            public DataTable Get_FirstName()
            {
    
                DataTable dt = new DataTable();
                DataRow dr;
                string Item = "ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,ThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtextThisisalongtext,https://forums.asp.net/t/2132969.aspx?GridView+column+width+css,https://forums.asp.net/t/2132969.aspx?GridView+column+width+css";
                string[] list = Item.Split(',');
                dt.Columns.Add("description", typeof(string));
                for (int i = 0; i < list.Length; i++)
                {
                    dr = dt.NewRow();
                    dr["description"] = list[i];
                    dt.Rows.Add(dr);
                }
                return dt;
            }
    
            /// <summary>
            /// Handles the RowDataBound event of the GridView6 control.
            /// </summary>
            /// <param name="sender">The source of the event.</param>
            /// <param name="e">The <see cref="GridViewRowEventArgs"/> instance containing the event data.</param>
            protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    //here change the column index as per your GridVIew Design
                    e.Row.Cells[0].Attributes.Add("style", "word-break:break-all;word-wrap:break-word;");
                }
            }
    Wednesday, December 6, 2017 7:41 PM
  • User2103319870 posted

    If the gridview contains BoundColumn then you can try with solution provided in this link : https://forums.asp.net/post/5699193.aspx

    Wednesday, December 6, 2017 7:44 PM
  • User1510859543 posted

    Did not work. It just made all columns the same width and the long text ran beyond right side of Grid.

    Wednesday, December 6, 2017 7:59 PM
  • User2103319870 posted

    made all columns the same width and the long text ran beyond right side of Grid

    Can you prvoide the gridview mark up if possible

    Wednesday, December 6, 2017 8:23 PM
  • User475983607 posted

    Did not work. It just made all columns the same width and the long text ran beyond right side of Grid.

    It's not clear what shape the code is in at this point and I assume the CSS fixed the table size as requested.

    .myGridView {
        table-layout: fixed;
    }

    Try the following CSS for handling overflow within the table cell (td).

    https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

    Wednesday, December 6, 2017 8:31 PM
  • User1510859543 posted

    Getting closer but now many words at right of column split inside the word, for example:

    This is my long sentence and th
    eir words are splitting.

    Wednesday, December 6, 2017 8:33 PM
  • User2103319870 posted

    many words at right of column split inside the word

    if you are using the code I provided above then you need to make a slight change to fix the issue. Try with below code

     protected void GridView6_RowDataBound(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.DataRow)
                {
                    //here change the column index as per your GridVIew Design
                    e.Row.Cells[0].Attributes.Add("style", "word-break:break-word;word-wrap:break-word;");
                }
            }
    Wednesday, December 6, 2017 9:05 PM
  • User1510859543 posted

    Below is my code and GridView.  I am only setting the style on the column with the "LblQuestion" control.  I used the F12 tools and the style is being applied to that column (TD).  I tried both the style=""

    The RowDataBound code has the following.  I have also tried style="word-break:break-word;word-wrap:break-word;")

             lbl = e.Row.FindControl("LblQuestion")
             lbl.Attributes.Add("style", "word-break:break-all;word-wrap:break-word;")
    

    The markup is.

        <div class="WordWrap">
    
            <asp:GridView ID="gvHelpline" runat="server" AllowPaging="True" 
                AllowSorting="True" AutoGenerateColumns="False" CellPadding="4" 
                DataKeyNames="HelplineID" DataSourceID="SqlHelpline" ForeColor="#333333" 
                GridLines="None" Font-Size="Small" Width="100%">
                <Columns>
                    <asp:TemplateField>
                        <EditItemTemplate>
                            <asp:LinkButton ID="LbtnCancel" runat="server" Text="Cancel" CommandName="Cancel" ForeColor="Red" />
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="LbtnEdit" runat="server" Text="Edit" CommandName="Edit" CssClass="Hide" /><br /><br />
                            <asp:LinkButton ID="LBtnComment" runat="server" 
                                ToolTip="Allows entry of a comment to Responses." 
                                CommandName="post" CommandArgument='<%# Eval("HelplineID") %>'>Post&nbsp;a<br />Comment
                            </asp:LinkButton>                                                        
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="6%" />
                    </asp:TemplateField>           
                    <asp:TemplateField HeaderText="Question#" InsertVisible="False" SortExpression="HelplineID">
                       <EditItemTemplate> 
                            <asp:Label ID="LblHelplineID" runat="server" Text='<%# Eval("HelplineID") %>'></asp:Label>
                        </EditItemTemplate>                          
                        <ItemTemplate>
                            <asp:Label ID="LblHelplineID" runat="server" Text='<%# Bind("HelplineID") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="6%" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date" SortExpression="QuestionDate">
                        <EditItemTemplate>
                            <asp:Label ID="LblQuestionDate" runat="server" Text='<%# Eval("QuestionDate", "{0:d}") %>'></asp:Label> 
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LblQuestionDate" runat="server" Text='<%# Bind("QuestionDate", "{0:d}") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="7%" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Question" SortExpression="Question" ItemStyle-VerticalAlign="Top">
                        <EditItemTemplate>                
                            <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>                
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="33%" />
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Responses" SortExpression="Response" ItemStyle-VerticalAlign="Top">
                        <EditItemTemplate>
                            <asp:TextBox ID="txtResponse" runat="server" Text='<%# Bind("Response") %>' 
                                TextMode="MultiLine" Rows="6" Width="100%">
                            </asp:TextBox>
                            <asp:Label ID="LblResponseEdit" runat="server" Text='<%# Eval("Response") %>' CssClass="Hide"></asp:Label>
                            <asp:TextBox ID="txtComment" runat="server" 
                                TextMode="MultiLine" Rows="6" Width="100%" CssClass="Hide">
                            </asp:TextBox>
                            <br />
                            <asp:Label ID="LblEnteredBy" runat="server" Text="Entered By:" CssClass="Hide"></asp:Label>
                            <asp:TextBox ID="txtEnteredBy" runat="server" CssClass="Hide"></asp:TextBox>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LblResponse" runat="server" Text='<%# Eval("Response") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="33%" />
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <EditItemTemplate>
                            <asp:Label ID="LblUser" runat="server" Text='<%# Eval("OrgContact") %>'></asp:Label>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LblUser1" runat="server" Text='<%# Eval("OrgContact") %>'></asp:Label>
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="7%" />
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <EditItemTemplate>
                            <asp:LinkButton ID="LbtnUpdate" runat="server" Text="Update" CommandName="Update"/>                    
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:LinkButton ID="LbtnDelete" runat="server" Text="Delete" ForeColor="red"
                                CommandName="Delete" OnClientClick="return confirmDel();" CssClass="Hide">
                            </asp:LinkButton>                      
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="6%" />
                    </asp:TemplateField>
                </Columns>
                <FooterStyle CssClass="gridfoot" />
                <PagerStyle CssClass="gridfoot" HorizontalAlign="Center" />
                <HeaderStyle CssClass="gridhead" />
                <EditRowStyle CssClass="gridedit" />
                <EmptyDataRowStyle ForeColor="Red" Font-Bold="true" Font-Size="Medium" />
            </asp:GridView>
        </div>
    
    Wednesday, December 6, 2017 9:46 PM
  • User-335504541 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">dlchase</g>,

    I think you could try to set ItemStyle-Wrap to true, for example:

                            <asp:TemplateField HeaderText="Question" SortExpression="Question" ItemStyle-VerticalAlign="Top" ItemStyle-Wrap="true">
                                <EditItemTemplate>
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </EditItemTemplate>
                                <ItemTemplate>                                
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </ItemTemplate>
                                <ItemStyle VerticalAlign="Top" Width="33%" />
                            </asp:TemplateField>

    And the result is:

    Best Regards,

    Billy

    Thursday, December 7, 2017 9:03 AM
  • User1510859543 posted

    ItemStyle-Wrap already defaults to true so this change did nothing different.  I wonder if the problem is that we can't have it both ways?  For normal words the Label (span) splits as it should.  The problem arises when one of the words in the paragraph is longer than the width of the control.

    Thursday, December 7, 2017 1:55 PM
  • User-335504541 posted

    Hi <g class="gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_disable_anim_appear ContextualSpelling ins-del multiReplace" id="14" data-gr-id="14">dlchase</g>,

    For normal words the Label (span) splits as it should.  The problem arises when one of the words in the paragraph is longer than the width of the control.

    You could try to add a class to your label and set <g class="gr_ gr_136 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="136" data-gr-id="136">css</g> to the class.

    For example:

    <g class="gr_ gr_183 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="183" data-gr-id="183">Css</g>:

              .break{
                  word-break:break-word;
                  word-wrap:break-word
              }

    And the <g class="gr_ gr_228 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling" id="228" data-gr-id="228">gridview</g>:

                            <asp:TemplateField HeaderText="Question" SortExpression="Question" ItemStyle-VerticalAlign="Top">
                                <EditItemTemplate>
                                    <asp:Label ID="LblQuestion" runat="server" CssClass="break" Text='<%# Eval("Question") %>'></asp:Label>
                                </EditItemTemplate>
                                <ItemTemplate>                                
                                    <asp:Label ID="LblQuestion" runat="server" CssClass="break" Text='<%# Eval("Question") %>'></asp:Label>
                                </ItemTemplate>
                                <ItemStyle VerticalAlign="Top" Width="33%" />
                            </asp:TemplateField>

    The result is if the word too long, it will break inside. Other situation it will break from the space:

    Best Regards,

    Billy

    Friday, December 8, 2017 5:42 AM
  • User1510859543 posted

    This is similar to a previous response that did not work.  I tried it again, setting the style in code-behind rather than use a css setting on the page. The result was that it worked on Chrome but did not work in Firefox or Edge.  Hmmmm.  Also worth noting is that if I place a dash anywhere in the word it breaks fine.

    Friday, December 8, 2017 2:40 PM
  • User-335504541 posted

    Hi dlchase,

    The result was that it worked on Chrome but did not work in Firefox or Edge.

    Please try to use following code for Firefox: 

    white-space: -moz-pre-wrap;

    https://stackoverflow.com/questions/4282757/how-can-i-make-firefox-word-break-with-css

    And word-break should be supported by MS Edge.

    Best Regards,

    Billy

    Monday, December 11, 2017 1:55 PM
  • User1510859543 posted

    Still no luck with Edge or Firefox. Chrome works perfectly.  Below are sections of my latest css and markup. I tried both pre-wrap and -moz-pre-wrap.

        <style type="text/css">
            .break{
                word-break: break-word;
                word-wrap: break-word;
                white-space: pre-wrap;        
            }
        </style>
    
    In GridView:
    
                    <asp:TemplateField HeaderText="Question" SortExpression="Question">
                        <EditItemTemplate>                
                            <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>' CssClass="break"></asp:Label>
                        </EditItemTemplate>
                        <ItemTemplate>
                            <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>' CssClass="break"></asp:Label>                
                        </ItemTemplate>
                        <ItemStyle VerticalAlign="Top" Width="33%" />
                    </asp:TemplateField>
    
    Monday, December 11, 2017 2:49 PM
  • User-335504541 posted

    Hi <g class="gr_ gr_5 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="5" data-gr-id="5">dlchase</g>,

    Please try to use the following code:

        <style>
              .break{
                  word-break:break-word;
                  word-wrap:break-word;             
                  display:block;
                  width:33vw
              }        
        </style>
    
                            <asp:TemplateField HeaderText="Question" SortExpression="Question" ItemStyle-VerticalAlign="Top"  > 
                                <HeaderStyle CssClass="header" />
                                <EditItemTemplate>
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </EditItemTemplate>
                                <ItemTemplate>         
                                    <asp:Label ID="LblQuestion" runat="server" Text='<%# Eval("Question") %>'></asp:Label>
                                </ItemTemplate>                         
                                <ItemStyle VerticalAlign="Top"  CssClass="break" />
                            </asp:TemplateField>
    

    And the result:

    In chrome:

    In FireFox:

    In Edge:

    Best Regards,

    Billy

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 12, 2017 6:14 AM
  • User1510859543 posted

    Bingo!  Thank you.

    Tuesday, December 12, 2017 2:23 PM