PDA

View Full Version : Can you make labels wrap on form fields?



parky128
30 Jan 2012, 4:37 AM
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
30 Jan 2012, 9:15 AM
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
29 Jun 2012, 6:36 AM
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
9 Jul 2012, 12:41 AM
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
9 Jul 2012, 5:56 AM
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
},

cydaps
7 Nov 2013, 9:30 AM
Just to confirm, in Touch 2.3.0 the labelWrap: true works perfectly as long as there is white space for it to use to wrap. :)