CODEWITHSUNDEEP
cssextjs
CARTIC
CARTIC

Reputation: 573

Wrap label in EXTJS

I'm not able to wrap a label in extjs. I need to set the value dynamically, and when the value is too long, it breaks the layout (which is table layout in my case).

Below is the code which I use:

{
    xtype: 'label',
    text: 'Bla bla bla bla bla',
    labelWidth: 20, //had tried width as well, but no use
    labelAlign: 'left',
    autoWidth: false,
    boxMinWidth: 10,
    boxMaxWidth: 20,
    colspan: 1,
    margin: '50 50 50 50'
}

I had tried to modify the default extjs css file as well. Added css

.x-form-label{
   white-space:normal
}

in the ext-theme-classic-all.css but of no use.

Please help.

Upvotes: 2

Views: 4456

Answers (2)

A.W.
A.W.

Reputation: 3021

What worked for me in 4.2.1 when wrapping long label text inside a panel is this:

{
    xtype: 'label',
    width: '100%',
    text: 'xxxxxxxxxxxxx yyyyxx xxxx xxxx xxxxx xxxxx aaaa bbbb cccc dddd xxxxxxxxxxxxx yyyyxx xxxx xxxx xxxxx xxxxx aaaa bbbb cccc dddd ',
},

looks like this in my app in Chrome, FF and IE11:

enter image description here

Upvotes: 1

Thomas Ingham
Thomas Ingham

Reputation: 1102

This works in Webkit.

{
    xtype: "label",
    id: "specificLabel"
}

.x-form-label#specificLabel {
    width: 20px;
    overflow: hidden;
}

Upvotes: 0

Related Questions