[CLOSED] Column layout to build a table dynamically

[trePjt]

I tried to build a table dynamically as following code example.

However if there is a column have very long text. The text will not grow inside its own column, but overlap to following column.
How can I fix this?

<%@ Page Language="C#" %>
   
<script runat="server">
        
    protected void Page_Load(object sender, EventArgs e)
    {
        Container conRow = new Container { Layout = "ColumnLayout" };

        Container conStyle = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblStyle = new Ext.Net.Label { Cls = "detail-text" };
        lblStyle.Text = "fff";
        if (lblStyle.Text.Trim().CompareTo("") == 0)
        {
            lblStyle.Text = "1";
            lblStyle.Hidden = true;
            lblStyle.HideMode = HideMode.Visibility;
        }
        conStyle.Items.Add(lblStyle);
        conRow.Items.Add(conStyle);

        Container conColor = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblColor = new Ext.Net.Label { Cls = "detail-text" };
        lblColor.Text = "Red";
        if (lblColor.Text.Trim().CompareTo("") == 0)
        {
            lblColor.Text = "1";
            lblColor.Hidden = true;
            lblColor.HideMode = HideMode.Visibility;
        }
        conColor.Items.Add(lblColor);
        conRow.Items.Add(conColor);

        Container conWidth = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblWidth = new Ext.Net.Label { Cls = "detail-text" };
        lblWidth.Text = "12";
        if (lblWidth.Text.Trim().CompareTo("") == 0)
        {
            lblWidth.Text = "1";
            lblWidth.Hidden = true;
            lblWidth.HideMode = HideMode.Visibility;
        }
        conWidth.Items.Add(lblWidth);
        conRow.Items.Add(conWidth);

        Container conDesc = new Container { ColumnWidth = 0.21, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblDesc = new Ext.Net.Label { Cls = "detail-text" };
        lblDesc.Text = "veryy long textdddddddddddddddddddddddddddddddddddddddddd";
        if (lblDesc.Text.Trim().CompareTo("") == 0)
        {
            lblDesc.Text = "1";
            lblDesc.Hidden = true;
            lblDesc.HideMode = HideMode.Visibility;
        }
        conDesc.Items.Add(lblDesc);
        conRow.Items.Add(conDesc);

        Container conPrc = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblPrc = new Ext.Net.Label { Cls = "detail-text" };
        lblPrc.Text = "100";
        if (lblPrc.Text.Trim().CompareTo("") == 0)
        {
            lblPrc.Text = "1";
            lblPrc.Hidden = true;
            lblPrc.HideMode = HideMode.Visibility;
        }
        conPrc.Items.Add(lblPrc);
        conRow.Items.Add(conPrc);

        Container conUnit = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblUnit = new Ext.Net.Label { Cls = "detail-text" };
        lblUnit.Text = "KG";
        if (lblUnit.Text.Trim().CompareTo("") == 0)
        {
            lblUnit.Text = "1";
            lblUnit.Hidden = true;
            lblUnit.HideMode = HideMode.Visibility;
        }
        conUnit.Items.Add(lblUnit);
        conRow.Items.Add(conUnit);

        Container conPutup = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblPutup = new Ext.Net.Label { Cls = "detail-text" };
        lblPutup.Text = "Y";
        if (lblPutup.Text.Trim().CompareTo("") == 0)
        {
            lblPutup.Text = "1";
            lblPutup.Hidden = true;
            lblPutup.HideMode = HideMode.Visibility;
        }
        conPutup.Items.Add(lblPutup);
        conRow.Items.Add(conPutup);

        Container conMOQ = new Container { ColumnWidth = 0.08, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblMOQ = new Ext.Net.Label { Cls = "detail-text" };
        lblMOQ.Text = "123";
        if (lblMOQ.Text.Trim().CompareTo("") == 0)
        {
            lblMOQ.Text = "1";
            lblMOQ.Hidden = true;
            lblMOQ.HideMode = HideMode.Visibility;
        }
        conMOQ.Items.Add(lblMOQ);
        conRow.Items.Add(conMOQ);

        Container conRmk = new Container { ColumnWidth = 0.21, StyleSpec = "text-align: center;" };
        Ext.Net.Label lblRmk = new Ext.Net.Label { Cls = "detail-text" };
        lblRmk.Text = "remark";
        if (lblRmk.Text.Trim().CompareTo("") == 0)
        {
            lblRmk.Text = "1";
            lblRmk.Hidden = true;
            lblRmk.HideMode = HideMode.Visibility;
        }
        conRmk.Items.Add(lblRmk);
        conRow.Items.Add(conRmk);

        conDeatail.Items.Add(conRow);
    }
        
</script>
   
<!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>Ext.NET Example</title>
  
    <style type="text/css">
       
        .normal-text-left { font-size: 16px;
                            padding-left: 15px;}
        .detail-text { font-size: 16px;
                       }

                            
    </style>
  
   
</head>
<body>
    <ext:ResourceManager runat="server" />
                        <ext:Container ID="conDeatail" runat="server" Border="false" Cls="normal-text-left">
                        </ext:Container>
</body>
</html>

This a another result I got in chrome

[Daniil]

Hi @trePjt,

The text is not wrapped if there is no white spaces. As far as I can know there is no such functionality either in Ext.NET or CSS to split the text without spaces by lines.

Do you know if there is any solution anywhere?

[trePjt]

I understand what my problem is. Actually this field will not contains a long text with no withe space.
My testing example not correct. Sorry to border you.

[Daniil]

No problem. So, do you mind we close the thread or need any assistance more?

[trePjt]

You can mark it as closed. Thank you.