Can you make labels wrap on form fields?

[parky128]

I have set some fixed widths on fields in a fieldset, but I am finding for labels with longer pieces of text, they get chopped off at the end and do not wrap onto a new line.

Code


{
xtype: 'fieldset',
title: 'Map Options',
defaults: {
labelWidth: '200px',
},
items: [
{
xtype: 'checkboxfield',
itemId : 'chkShowTraffic',
label: 'Show Traffic Layer'
},
{
xtype: 'checkboxfield',
itemId : 'chkShowUnitLabels',
label: 'Show Vehicle Labels'
},{
xtype: 'checkboxfield',
itemId : 'chkShowPlacemarkers',
label: 'Show Placemarkers'
}, {
xtype: 'checkboxfield',
itemId : 'chkAutoResetMap',
label: 'Reset the Map automatically when new positions are received'
}
]
}



I couldn't see any config options to enable field label text wrapping, is this possible?

[mitchellsimoens]

This is being controlled via CSS. Inspect the dom of the field to see what CSS rules are being applied to the label element. You can then use labelCls config and add your own CSS class name to override the default behavior.

[innovationSoftware]

There is a labelWrap config for fields;

http://docs.sencha.com/touch/2-0/#!/api/Ext.field.Field-cfg-labelWrap

Is that what you were after?



(http://docs.sencha.com/touch/2-0/#!/api/Ext.field.Field-cfg-labelWrap)

[cihangir34]

Hi, i have labels on my product detail page in my project. there are price, amount labels etc. On iPhone and Android, label seems "Fiyat (..." on portrate orientation. Screeshot and my code are below. How can i wrap that label?
code:
{
xtype: 'container',
layout: {type:'vbox'},

items: [
{
xtype: 'textfield',
label: 'Fiyat',
readOnly: true
},
{
xtype: 'textfield',
label: 'Fiyat ( '+Constants.LABEL_AFTER_TAX+' )',
labelWrap:true,
readOnly: true
},
36941

[cihangir34]

Hi, i resolved this problem with the code below. i wrote the label text in div tags and set style with white-space:normal and width:100%.
{
xtype: 'textfield',
label: '<div style="width:100%;white-space:normal;">Fiyat ( '+Constants.LABEL_AFTER_TAX+' )</div>',
readOnly: true
},