Grid view overflows outside its defined width

Question

I have a div with 2 grid views each occupying 50% of the div width.

The last column of the first grid view contains names which are about 200 characters long.

As a result of this it continues to the second grid view.

I don't want to use scrollbars.

Is there any way I can limit the first grid view to 50% and display dots(...) in the column after its width is over ?

Code for the first grid view :

<div style="width:50%;height:300px;float:left;" align="left">
      <asp:GridView ID = "UnanalysedGV" runat ="server" DataSourceID = "sourceProducts" AutoGenerateColumns = "False" CssClass="mGrid headerclass" AllowSorting="True" Width="100%" AllowPaging="true" >     
                        <HeaderStyle HorizontalAlign="Left" />
                        <Columns>              
                            <asp:BoundField DataField = "Id" HeaderText = " Id" /> 
                            <asp:BoundField DataField = "Owner" HeaderText = "Owner"  />

                             <asp:BoundField DataField="eName" HeaderText="Name" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="Right" />


                      </Columns>
          </asp:GridView>

            </div>

Similarly,for the second grid view.

Any information on how to go about it would also be very very helpful :) — user1698232, Mar 01 '15 at 12:56
Hi, I have looked into this for my own page, but have not found anything that works good :/ — Richard87, Mar 01 '15 at 13:23
Take a look at this question with answers... http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide — Richard87, Mar 01 '15 at 13:24

score 1 · Accepted Answer · answered Mar 01 '15 at 17:50

I found an answer to this :

 <asp:TemplateField HeaderText="Name" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="left"> 
                                <ItemTemplate>
                            <div style="width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">
                                    <%# Eval("Name") %>
                           </div>
                                    </ItemTemplate>
                            </asp:TemplateField>

Grid view overflows outside its defined width

1 Answers1