Printable View
I'm using a TableLayout in window. In a Cell I have a Panel and a Coolite Label.
If the Label contains a space and I shrink the window the Label's text wraps. In an HTML Table Cell I can just add a NOWRAP property to the cell to fix this. However, In the Coolite Cell control I find no such capability.
How can this be done?
Shouldn't the Coolite Cell have a NoWrap bool property to set this?
Hi Randy,
There are several solutions
1.
- Define css rule
Code:<style type="text/css">
.no-wrap-panel .x-table-layout td
{
white-space:nowrap;
}
</style>
- Add Cls="no-wrap-panel" to the panel which contains TableLayout
Example:
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.no-wrap-panel .x-table-layout td
{
white-space:nowrap;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Panel ID="pnlTableLayout" runat="server" Cls="no-wrap-panel" Title="Table Layout" Height="300" Width="200" BodyStyle="padding:15px;">
<Body>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="4">
<ext:Cell>
<ext:Panel ID="Panel2" runat="server" Title="Basic Table Cell" BodyStyle="padding:15px;">
<Body>
<p>Basic panel in a table cell sd fhh dsjf jdh fjdshfjds fjdsh fjdsh fsdjfhj sdfjdshfjsdhfjhsdjfhjsdfjsdh dfds fds.</p>
</Body>
</ext:Panel>
</ext:Cell>
</ext:TableLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>
2. Define the same rule (only selector .no-wrap-panel) and add to panel inside Cell
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.no-wrap-panel
{
white-space:nowrap;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Panel ID="pnlTableLayout" runat="server" Title="Table Layout" Height="300" Width="200" BodyStyle="padding:15px;">
<Body>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="4">
<ext:Cell>
<ext:Panel ID="Panel2" runat="server" Title="Basic Table Cell" BodyStyle="padding:15px;" Cls="no-wrap-panel">
<Body>
<p>Basic panel in a table cell sd fhh dsjf jdh fjdshfjds fjdsh fjdsh fsdjfhj sdfjdshfjsdhfjhsdjfhjsdfjsdh dfds fds.</p>
</Body>
</ext:Panel>
</ext:Cell>
</ext:TableLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>
3. Add Cls="no-wrap-label" to the Label
Code:<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.no-wrap-label
{
white-space:nowrap;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Panel ID="pnlTableLayout" runat="server" Title="Table Layout" Height="300" Width="200" BodyStyle="padding:15px;">
<Body>
<ext:TableLayout ID="TableLayout1" runat="server" Columns="4">
<ext:Cell>
<ext:Panel ID="Panel2" runat="server" Title="Basic Table Cell" BodyStyle="padding:15px;">
<Body>
<ext:Label runat="server"
Cls="no-wrap-label"
Html="<p>Basic panel in a table cell sd fhh dsjf jdh fjdshfjds fjdsh fjdsh fsdjfhj sdfjdshfjsdhfjhsdjfhjsdfjsdh dfds fds.</p>"></ext:Label>
</Body>
</ext:Panel>
</ext:Cell>
</ext:TableLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>
Thanks for the samples. I'm sure I can get one of these to work. You can mark this closed.
However, since the TableLayout is a wrapper for the standard HTML tables, It still seems reasonable to add a Cell.NoWrap=true feature.
I'd also like to suggest that this be a low priority enhancement request.
Thanks for your suggestion, Randy. I agreed with you, it is required for TableLayout.
We will try to implement it and include to the nearest release
Cool, thanks