What's New?

[CLOSED] Howto NOWRAP a cell in the TableLayout

  1. #1
    Dec 29, 2008, 8:44 AM

    [CLOSED] Howto NOWRAP a cell in the TableLayout



    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?


  2. #2
    Dec 29, 2008, 9:30 AM

    RE: [CLOSED] Howto NOWRAP a cell in the TableLayout

    Hi Randy,

    There are several solutions

    1.
    - Define css rule
         <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:
            <%@ 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
           <%@ 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
    <%@ 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>
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 2:46 AM.
  3. #3
    Dec 29, 2008, 12:13 PM

    RE: [CLOSED] Howto NOWRAP a cell in the TableLayout



    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.



  4. #4
    Dec 29, 2008, 12:23 PM

    RE: [CLOSED] Howto NOWRAP a cell in the TableLayout

    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

  5. #5
    Dec 29, 2008, 1:00 PM

    RE: [CLOSED] Howto NOWRAP a cell in the TableLayout

    Cool, thanks
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 2:46 AM.

Similar Threads

  1. [CLOSED] TableLayout Control adding cell problem
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: May 22, 2011, 2:25 PM
  2. [CLOSED] Insert Cell into ext:TableLayout
    By georgek in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 24, 2011, 5:07 PM
  3. [CLOSED] TableLayout adding new cell
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Jan 17, 2011, 10:48 AM
  4. [CLOSED] How to :Cell spacing in dynamic TableLayout
    By Hari_CSC in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 15, 2010, 3:27 AM
  5. [CLOSED] TableLayout Cell has no runat=server
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 29, 2009, 6:12 PM

Posting Permissions