Question

I have a gridview and i want to preserve its width no matter what data it is displaying. For example, if there is a word with the length of 900 (Eg. abbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb) I want gridview to display in a new line instead of widening its width (girdview width is 700). For instance, like stackoverfolw, it is displaying my example word very well. This textbox has not widen than it should, hasn't ?

My current code can't do the job. Thanks. Any help?

My code.

    <asp:GridView ID="gv" runat="server" CssClass="gv" AutoGenerateColumns="False" Width="700px">
    <Columns>
        <asp:BoundField DataField="" HeaderText="" 
            dataformatstring="{0:dd-MM-yyyy}" HtmlEncode="false" SortExpression="" >
    <ControlStyle Width="100" />
    <HeaderStyle Width="100" />
    <ItemStyle Width="100" />
    </asp:BoundField>

    .gv th
    {
        width: 100px;   
    }
Was it helpful?

Solution

This works for me

.my-text
{
    float:left;
    overflow-y:auto;
    overflow-x:auto;
    word-break:break-all;
}

Inside your template field

 <asp:TemplateField>
 <ItemTemplate>
     <asp:Label ID="Label1" runat="server" CssClass="my-text"
                Text='<%# Bind("YourColumnName")' 
                ></asp:Label>

 </ItemTemplate>
</asp:TemplateField>

Sample

OTHER TIPS

Give width of div containing grid in pixels instead of percentage

<div id="divGrid" style='position:absolute; width:800px;'>

<!-- your grid here -->

</div> 

Also, You can take width of screen in pixel and calculate the pixel in percentage. suppose width of screen is 1000 pixel is return by screen.width then you 90% will be 900px.

In javascript :

<script language="javascript" type="text/javascript">
   document.getElementById('divGrid').style.width = screen.width + "px";
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top