none
Gridview text not wrapping in IE8

    Question

  • I have a gridview on a page and am having issues with the width and text not wrapping in IE8. 

    The width and wrapping work fine in IE7.  Below is the code..

     

    <asp:GridView ID="IssueGrid" runat="server" AutoGenerateColumns="False" Width="100%" GridLines="Horizontal" DataKeyNames="Id" OnRowCommand="IssueGrid_RowCommand" OnRowDataBound="IssueGrid_RowBound" SkinID="Default"><Columns>
        <asp:TemplateField ItemStyle-Width="20">
          <ItemTemplate>
            <asp:Button ID="EditIssueButton" runat="server" CommandName="EditIssue" CommandArgument='<%#Eval("Id")%>' Text="Edit" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="IssueTypes" HeaderText="Issue Type" ItemStyle-Wrap="true" ItemStyle-Width="100"></asp:BoundField>
        <asp:BoundField HtmlEncode="False" DataFormatString="{0:M/yyyy}" DataField="StartDate" HeaderStyle-Width="10" ItemStyle-Width="10" SortExpression="StartDate" HeaderStyle-Wrap="true" HeaderText="Effective Date" HeaderStyle-HorizontalAlign="Center"></asp:BoundField>
        <asp:BoundField HtmlEncode="False" DataFormatString="{0:M/yyyy}" DataField="ClosureDate" HeaderStyle-Width="10" ItemStyle-Width="10" SortExpression="ClosureDate" HeaderStyle-Wrap="true" HeaderText="Closure Date" HeaderStyle-HorizontalAlign="Center"></asp:BoundField>
        <asp:BoundField DataField="MagnitudeValues" HeaderText="Magnitude" ItemStyle-Width="20"></asp:BoundField>
        <asp:BoundField DataField="DisplayOnIssueSummary" HeaderText="Display On Issue Summ?" ItemStyle-Width="200" HeaderStyle-Width="200" HeaderStyle-Wrap="true" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" />
        <asp:BoundField DataField="Description" SortExpression="Description" HeaderText="Issue Description" ItemStyle-Width="20" ItemStyle-Wrap="true"></asp:BoundField>
        <asp:BoundField DataField="ActionPlan" SortExpression="ActionPlan" HeaderText="Action Plan" HeaderStyle-Width="350" ItemStyle-Width="350" ItemStyle-Wrap="true"></asp:BoundField>
        <asp:BoundField DataField="AssistanceRequired" SortExpression="AssistanceRequired" HeaderText="Assistance Required" ItemStyle-Width="30" HeaderStyle-Width="30" HeaderStyle-Wrap="true" ItemStyle-Wrap="true" HeaderStyle-HorizontalAlign="Center"></asp:BoundField>
        <asp:TemplateField ItemStyle-Width="20">
          <ItemTemplate>
            <asp:Button ID="DeleteIssueButton" runat="server" CommandName="DeleteIssue" CommandArgument='<%#Eval("Id") %>' Text="Delete" />
          </ItemTemplate>
        </asp:TemplateField>
        </Columns>
        <EmptyDataTemplate>
          No Identified Issues.
        </EmptyDataTemplate>
      </asp:GridView>
    
    Thursday, November 04, 2010 7:39 PM

Answers

  • Hi,

    I have looked at your problem. Its seems this is an issue of IE8 or the word-wrap is not valid as per new HTML standard.

    A grid view is rendered as table and the data you pass in the gridview, directly goes inside a TD s. And in ie 8 even if we put word -wrap in TD , it does not work.

    One way you can solve your problem by using TemplateField. You can add your data inside a container like DIV and give the word-wrap:break-word and the width property. Like-

    <asp:TemplateField HeaderText="Display On Issue Summ?" HeaderStyle-Width="40%" ItemStyle-HorizontalAlign="Center"
        ItemStyle-Width="40%">
        <ItemTemplate>
            <div style="word-wrap: break-word; width: 300px; border: solid 1px red;">
                <%#Eval("DisplayOnIssueSummary") %></div>
        </ItemTemplate>
    </asp:TemplateField>

     


    Thanks AnupDG
    Tuesday, November 09, 2010 12:18 PM

All replies

  • Hi illyena,

    Welcome to MSDN forums.

    Here is a link about the differernce between IE7 and IE8: http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx

    You should repost your question here: http://blogs.msdn.com/b/ie/archive/2009/03/12/site-compatibility-and-ie8.aspx 

     

    Have a nice day.

    Alan Chen

    Friday, November 05, 2010 9:09 AM
    Moderator
  • thanks for the response and the link.  There's not much information that i can see actually applies to my specific problem. 

    I dont think anyone would respond to my question if I posted it on that blog.... ... .. . .

    Friday, November 05, 2010 1:02 PM
  • Hi,

    You may try the listview control which is the same to gridview.

    Another suggestion is try to move the Css from control to Css file.

     


    Hope these helps, if you have any problems, please feel free to let me know.

    Best Regards,
    Alan Chen
    ________________________________________
    Please remember to mark the replies as answers if they help and unmark them if they provide no help

    Monday, November 08, 2010 7:40 AM
    Moderator
  • Hi,

    I have looked at your problem. Its seems this is an issue of IE8 or the word-wrap is not valid as per new HTML standard.

    A grid view is rendered as table and the data you pass in the gridview, directly goes inside a TD s. And in ie 8 even if we put word -wrap in TD , it does not work.

    One way you can solve your problem by using TemplateField. You can add your data inside a container like DIV and give the word-wrap:break-word and the width property. Like-

    <asp:TemplateField HeaderText="Display On Issue Summ?" HeaderStyle-Width="40%" ItemStyle-HorizontalAlign="Center"
        ItemStyle-Width="40%">
        <ItemTemplate>
            <div style="word-wrap: break-word; width: 300px; border: solid 1px red;">
                <%#Eval("DisplayOnIssueSummary") %></div>
        </ItemTemplate>
    </asp:TemplateField>

     


    Thanks AnupDG
    Tuesday, November 09, 2010 12:18 PM
  • thanks
    is the only way I solved this problem
    Wednesday, May 23, 2012 10:59 AM