What's New?

[CLOSED] Text overflow in column with ellipsis

  1. #1
    Aug 21, 2013, 3:20 PM

    [CLOSED] Text overflow in column with ellipsis

    I am trying to get a hidden text overflow with ellipsis in a column layout panel with containers as column. But somehow no solution I found is working. I am sure I missed an important detail... I commented out the tries I mad and which didn't work.

    demo.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form" runat="server">

        <ext:ResourceManager ID="ResourceManager" runat="server" />

        <ext:Viewport runat="server" ID="vp">
        </ext:Viewport>

    </form>
</body>
</html>
    demo.aspx.cs
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class demo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            // Build Panel and add items
            Ext.Net.Panel panel = this.BuildColumnPanel("PANEL", 4);
            this.vp.Items.Add(panel);

            // change text of second column label
            Ext.Net.DisplayField df = this.FindControl("dfPANEL_2") as Ext.Net.DisplayField;
            df.Text = "This text is too long and should be hidden at the end of the line with ellipsis!";
            //df.OverflowX = Overflow.Hidden; //--> not working
            //df.FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;"; //--> not working
        }
    }

    private Ext.Net.Panel BuildColumnPanel(string id, int numberOfColumns)
    {
        Ext.Net.Panel panel = new Ext.Net.Panel
        {
            Title = id,
            ID = "pnl" + id,
            ManageHeight = true,
            Width = 800,
            BodyPaddingSummary = "5 10 5 10",
            Layout = "Column"
        };

        for (int i = 1; i <= numberOfColumns; i++)
        {
            panel.Items.Add(this.BuildColumnContainer(id, i, numberOfColumns));
        }

        return panel;
    }

    private Ext.Net.Container BuildColumnContainer(string id, int columnNumber, int numberOfColumns)
    {
        Ext.Net.Container columnContainer = new Ext.Net.Container
        {
            ID = "col" + id + "_" + columnNumber,
            ColumnWidth = 1.0 / numberOfColumns,
            Items =
            {
                new Ext.Net.DisplayField
                {
                    ID = "df" + id + "_" + columnNumber,
                    FieldLabel = "Column",
                    Text = "#" + columnNumber
                }
            }
        };

        return columnContainer;
    }
}
    Thanks for any tips.
    Last edited by geoffrey.mcgill; Aug 26, 2013 at 10:43 PM. Reason: [CLOSED]
  2. #2
    Aug 21, 2013, 3:50 PM
    Hi @tMp,

    This thing
     text-overflow: ellipsis;
    requires some width of the field. Your DisplayField has auto width.

    You could set up, for example:
    Layout = "form"
    for the columnContainer. Then uncomment the .FieldStyle thing. It should work.
  3. #3
    Aug 21, 2013, 4:14 PM
    In the demo file it works perfectly - thank you - unfortunately the form-layout-tag in the containerColumn crashes my layout in my real project. No more columns just one like a normal form. Like if I would set the form layout to the panel instead to of the containerColumn. will have to look into that because it should be the same layout setup.
    Last edited by tMp; Aug 21, 2013 at 4:18 PM.
  4. #4
    Aug 21, 2013, 5:34 PM
    Ok, got it but I have no clue why. the only difference between the 2 demo.aspx.cs is, that one has no predefined labels in the column.... this time the data is loaded during the activation of the tabpanel. I tried to keep the demo as near to my real project as possible. the problem is that I don't have those labels in the real project, there were just to fill something into the columns for the demo.

    demo.aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="demo.aspx.cs" Inherits="demo" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form" runat="server">

        <ext:ResourceManager ID="ResourceManager" runat="server" />

        <ext:TabPanel runat="server" StyleSpec="marginTop:10px" MinTabWidth="100">
            <Items>
                <ext:Panel runat="server" Title="Tab1" ID="tabOne" Height="800" Padding="10">
                    <DirectEvents>
                        <Activate OnEvent="loadData"></Activate>
                    </DirectEvents>
                </ext:Panel>
            </Items>
        </ext:TabPanel>


    </form>
</body>
</html>
    demo.aspx.cs 1 - working:
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class demo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            
        }
    }

    protected void loadData(object sender, DirectEventArgs e)
    {
        // Build Panel and add items
        Ext.Net.Panel panel = this.BuildColumnPanel("PANEL", 4);
        panel.AddTo(this.tabOne);

        Ext.Net.Container cont = panel.FindControl("colPANEL_1") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_2") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_3") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_4") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
    }

    private Ext.Net.Panel BuildColumnPanel(string id, int numberOfColumns)
    {
        Ext.Net.Panel panel = new Ext.Net.Panel
        {
            Title = id,
            ID = "pnl" + id,
            ManageHeight = true,
            BodyPaddingSummary = "5 10 5 10",
            Layout = "Column"
        };

        for (int i = 1; i <= numberOfColumns; i++)
        {
            panel.Items.Add(this.BuildColumnContainer(id, i, numberOfColumns));
        }

        return panel;
    }

    private Ext.Net.Container BuildColumnContainer(string id, int columnNumber, int numberOfColumns)
    {
        Ext.Net.Container columnContainer = new Ext.Net.Container
        {
            ID = "col" + id + "_" + columnNumber,
            ColumnWidth = 1.0 / numberOfColumns,
            Layout = "Form",
            Items =
            {
                new Ext.Net.Label
                {
                    Text = "Column " + columnNumber
                }
            }
        };

        return columnContainer;
    }
}
    demo.aspx.cs 2 - not working:
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Ext.Net;

public partial class demo : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            
        }
    }

    protected void loadData(object sender, DirectEventArgs e)
    {
        // Build Panel and add items
        Ext.Net.Panel panel = this.BuildColumnPanel("PANEL", 4);
        panel.AddTo(this.tabOne);

        Ext.Net.Container cont = panel.FindControl("colPANEL_1") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_2") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_3") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
        cont = panel.FindControl("colPANEL_4") as Ext.Net.Container;
        cont.Add(new DisplayField { FieldLabel = "Test", Text = "This text is too long and should be hidden at the end of the line with ellipsis!", FieldStyle = "color: red; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" }, true);
    }

    private Ext.Net.Panel BuildColumnPanel(string id, int numberOfColumns)
    {
        Ext.Net.Panel panel = new Ext.Net.Panel
        {
            Title = id,
            ID = "pnl" + id,
            ManageHeight = true,
            BodyPaddingSummary = "5 10 5 10",
            Layout = "Column"
        };

        for (int i = 1; i <= numberOfColumns; i++)
        {
            panel.Items.Add(this.BuildColumnContainer(id, i, numberOfColumns));
        }

        return panel;
    }

    private Ext.Net.Container BuildColumnContainer(string id, int columnNumber, int numberOfColumns)
    {
        Ext.Net.Container columnContainer = new Ext.Net.Container
        {
            ID = "col" + id + "_" + columnNumber,
            ColumnWidth = 1.0 / numberOfColumns,
            Layout = "Form"
        };

        return columnContainer;
    }
}
  5. #5
    Aug 22, 2013, 10:24 AM
    The "form" layout seems to be not good for the case which is not working.

    Please try to replace with:
    Layout = "anchor",
DefaultAnchor = "100%"
  6. #6
    Aug 22, 2013, 12:45 PM
    Working perfectly, thank you!

Similar Threads

  1. [CLOSED] Possible to overflow text in a column grid?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 12, 2013, 8:36 AM
  2. [CLOSED] Ellipsis in FireFox
    By majunior in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 24, 2011, 1:46 PM
  3. Ext.form.Label - text overflow
    By shaunhendrix in forum 1.x Help
    Replies: 3
    Last Post: May 23, 2011, 8:53 AM
  4. [CLOSED] Tab titles ellipsis not working - here's a CSS fix
    By anup in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Apr 12, 2011, 3:48 PM
  5. [CLOSED] [1.0] TreePanel with ellipsis (...) if node titles overflow
    By danielg in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 02, 2011, 3:16 PM

Posting Permissions