locked
gridview cell text overflow RRS feed

  • Question

  • User-62667992 posted

    helloo

    ive a gridvew and some of the colum has looooooong text i tried to this to make some of the text appear and ellipsis in the end

      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="placeID" OnSelectedIndexChanged="GridView1_SelectedIndexChanged" Width="100%" BorderStyle="None" 
                GridLines="Horizontal" ForeColor="#6D6B64" HeaderStyle-HorizontalAlign="Left" HeaderStyle-BorderStyle="None" DataSourceID="ObjectDataSource1" AllowPaging="true"
        OnPageIndexChanging="OnPageIndexChanging" PageSize="10" CssClass="gridView" FooterStyle-BorderStyle="None" PagerStyle-BorderStyle="None" FooterStyle-ForeColor="#0000CC" PagerStyle-ForeColor="#0000CC" PagerSettings-Visible="True" PagerStyle-BackColor="#CCCCCC" PagerStyle-Width="60px" PagerStyle-CssClass="pstyle" PagerSettings-Mode="Numeric" PagerStyle-HorizontalAlign="Justify">
            <Columns>
                <asp:BoundField DataField="placeID" HeaderText="ID" InsertVisible="False" ReadOnly="True" SortExpression="placeID" />
                <asp:BoundField DataField="placeName" HeaderText="Name" SortExpression="placeName" />
                <asp:BoundField DataField="description" HeaderText="Description" SortExpression="description" ItemStyle-Wrap="true"  ItemStyle-Width="300px" ItemStyle-CssClass="ellipsis"/>
                <asp:BoundField DataField="type" HeaderText="Type" SortExpression="type" />
                <asp:BoundField DataField="PoBox" HeaderText="Po Box" SortExpression="PoBox" />
                <asp:BoundField DataField="phone" HeaderText="Phone" SortExpression="phone" />
                <asp:BoundField DataField="email" HeaderText="Email" SortExpression="email" />
                <asp:BoundField DataField="aditionalInformation" HeaderText="Aditional Information" SortExpression="aditionalInformation" />
                <asp:BoundField DataField="fax" HeaderText="Fax" SortExpression="fax" />
                <asp:BoundField DataField="mobile" HeaderText="Mobile" SortExpression="mobile" />
                <asp:BoundField DataField="website" HeaderText="Website" SortExpression="website" />
                <asp:BoundField DataField="picURL" HeaderText="PicURL" SortExpression="picURL" />
                <asp:BoundField DataField="specialityName" HeaderText="Speciality" SortExpression="specialityName" />
                <asp:BoundField DataField="picURLhead" HeaderText="Pic head" SortExpression="picURLhead" />
                <asp:BoundField DataField="picMenu" HeaderText="Pic Menu" SortExpression="picMenu" />
                <asp:BoundField DataField="loc" HeaderText="location" SortExpression="loc" ItemStyle-Wrap="true" ItemStyle-Height="30px" ItemStyle-Width="300px" ItemStyle-CssClass="ellipsis" />
                <asp:BoundField DataField="area" HeaderText="Area" SortExpression="area" />
                <asp:BoundField DataField="branchgroupName" HeaderText="Branch Group" SortExpression="branchgroupName" />
                  <asp:BoundField DataField="customerID" HeaderText="customerID" SortExpression="customerID" />
              
                 <asp:TemplateField ShowHeader="False">
                     <ItemTemplate>
                         
                         <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandName="Select" Text="Select" ToolTip="Edit" > <i style="color:#6D6B64;font-size:large" class="fa fa-pencil"></i></asp:LinkButton>
                         &nbsp;&nbsp;&nbsp;
                         <asp:LinkButton ID="LinkButton2" runat="server" CausesValidation="False" CommandName="Delete" Text="Delete" ToolTip="Delete"  OnClientClick="return confirm('Are you sure you want to delete this record?');" ><i style="color:#6D6B64;font-size:large" class="fa fa-remove"></i></asp:LinkButton>
                     </ItemTemplate>
                       </asp:TemplateField>
            </Columns>
    <HeaderStyle HorizontalAlign="Left" BorderStyle="None"></HeaderStyle>
            </asp:GridView>

    here are the css

    .gridView
    {
      width:100%;
      
      overflow:scroll;
    }
    
    
    
    .ellipsis {
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 50px;
        display:block;
        overflow: hidden;
     
     
        
    }

    so i got the text look better but it is underlined now ive no idea why 

    does anyone know wat is the problem?

    Thursday, January 5, 2017 8:58 AM

Answers

  • User-271186128 posted

    Hi arwa55,

    It’s not underline. lt is the border of the cell.

    The cell’s style is changed When you use the  “display: block;”

    You can add “border-bottom: 0px;” to fix it.

    For example:

    .ellipsis {
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 50px;
                display: block;
                border-bottom: 0px;
                overflow: hidden;
            }
    

    Best regards,
    Billy

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, January 6, 2017 6:53 AM