PDA

View Full Version : [NOREPRO] CheckboxGroup item width overflows parent container (layout issue)



Erikvip
2 Aug 2011, 11:00 AM
REQUIRED INFORMATION

Ext version tested:


Ext 4.0.2a

Browser versions tested against:


FF4
Chrome
IE8

Description:


The BoxLabel for Checkbox items is extending past the edge of the parent container. This seems to be a FORM layout issue, as the label container is set to a width greater than the parent's width value, causing it to overflow incorrectly. This works correctly in Ext 3.3.1

Steps to reproduce the problem:


See example/links below

The result that was expected:


Same as Ext 3.3.1 - label width does not exceed parent container

The result that occurs instead:


Label DIV container is too wide & extends past edge of parent

Test Case:



Ext.onReady(function() {
//var form = Ext.create('Ext.form.Panel', {
var form = new Ext.FormPanel({
renderTo : 'result',
items: [{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'checkboxgroup',
anchor : '100%',
vertical : true,
columns : 1,
fieldLabel: 'Field label',
labelAlign : 'top',
items: [
{boxLabel: 'one',name: 'v'},
{boxLabel: 'Long label that will extend past the edge of the container and be cutoff. Lorem ipsum dolor sit amet, consectetur adipisicing elit. ',name: 'v'},
{boxLabel: 'three',name: 'v'}
]}
]
}]
});
});
HELPFUL INFORMATION

See this URL for live test case:

ExtJS 4.0.2a (Broken) : http://jsfiddle.net/rcXLa/
ExtJS 3.3.1 (Same code works) : http://jsfiddle.net/rcXLa/1/

Debugging already done:


none

Possible fix:


not provided

Additional CSS used:


only default ext-all.css

Operating System:


OS/X
WinXP

mike.estes
2 Aug 2011, 3:41 PM
Thanks for the report and for using the template format. We got this one filed as EXTJSIV-3629

mitchellsimoens
15 Nov 2011, 1:50 PM
Just checked against our latest code and it seems like this is working as expected.

29311