Grid View Column Will Not Word Wrap

Question

I've made a gridview and I need the columns width ratios to be exact. Here's my code:

<asp:GridView runat="server" ID="table" DataSourceID="Data" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="LightGray" ShowHeader="false" 
                            DataKeyNames="ID" Width="100%" style="table-layout: fixed;" >

                            <Columns>

                                <asp:BoundField DataField="date" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="beltStatus" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBelts" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="returnDate" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="prepaidAmount" ItemStyle-Width="10%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="checkNumber" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"/>
                                <asp:BoundField DataField="notes" ItemStyle-Width="10%" ItemStyle-CssClass="fixedWidth" />
                                <asp:BoundField DataField="numberOfModsFiveStar" ItemStyle-Width="5%"  ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfModsCanada" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBuckles" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="numberOfBags" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center" />
                                <asp:BoundField DataField="customerName" ItemStyle-Width="10%" ItemStyle-CssClass="fixedWidth" />
                                <asp:BoundField DataField="state" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"  />
                                <asp:BoundField DataField="email" ItemStyle-Width="5%" ItemStyle-HorizontalAlign="Center"  />

                                <asp:TemplateField ItemStyle-Width="5%">
                                    <ItemTemplate>
                                        <asp:HyperLink runat="server" NavigateUrl='<%# ConfigurationManager.AppSettings["historyLog"] + "?table=mos&id=" + Eval("ID") %>' 
                                            Text='<%# Eval("lastChangedByUser") + " - " + Eval("lastChangeTime") %>' ></asp:HyperLink>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>

fixed width css:

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

Customer Name is almost always longer than the column width. I want the text to drop down to the next line. Instead it does this:

Can someone help?

BateTech BateTech · Accepted Answer · 2014-08-15T23:32:27

You may have white-space: nowrap specified somewhere else withing your CSS. Trying adding: white-space: normal to your fixedWidth CSS class. If that doesn't work, open Chrome right-click on the table cell, and say "inspect element". This will open the Chrome dev tools and there will be a "styles" tab, which will show you how the styles are being applied. You can also dynamically change the values for the styles within the Chrome dev tools and check the results.

Grid View Column Will Not Word Wrap

1 Answers