PDA

View Full Version : [CLOSED] Text overflow in column with ellipsis



tMp
Aug 21, 2013, 4:20 PM
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.

Daniil
Aug 21, 2013, 4: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.

tMp
Aug 21, 2013, 5: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.

tMp
Aug 21, 2013, 6: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;
}
}

Daniil
Aug 22, 2013, 11: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%"

tMp
Aug 22, 2013, 1:45 PM
Working perfectly, thank you!