PDA

View Full Version : FieldSet Height Calculation is incorrect



jej2003
15 Mar 2012, 9:17 AM
REQUIRED INFORMATION
Ext version tested:

Ext 4.1.0 RC1
Ext 4.1.0 Beta 2
Browser versions tested against:

FF10.0.2 (firebug 1.9.1 installed) (works)
Safari 5 (fails)
DOCTYPE tested against:

____
Description:

The height of the FieldSet seems to be calculated incorrectly causing the page to show scrollbars which truncate visual components. This works properly in Firefox but fails to render properly in Safari and Chrome .
Steps to reproduce the problem:

Run the attached example
click the - button
The result that was expected:

Scrollbar appears but the text field does not get truncated
The result that occurs instead:

Scrollbar appears but the text field is truncated
Test Case:
Ext.onReady(function() {


var k_panel = Ext.create('Ext.form.Panel', {
dockedItems: [
{
xtype: 'toolbar',
flex: 1,
dock: 'top',
items: [

{
xtype: 'tbfill',
flex: 1
},{
xtype : 'button',
text : '+',
listeners : {
click : function(){
window.setHeight(window.getHeight() + 1);
console.log(window.getHeight());
}
}
},{
xtype : 'button',
text : '-',
listeners : {
click : function(){
window.setHeight(window.getHeight() - 1);
console.log(window.getHeight());
}
}
},
{
xtype: 'button',
disabled: false,
itemId: 'addTypeButton',
iconCls: 'silk-add',
label : 'blah',
listeners : {
click : function(){
k_panel.down('#typeContainer').add({
collapsible : true,
flex : 1,
title : 'test',
xtype: 'fieldset',
//id : 'fieldset',
items : [{
xtype : 'checkbox',

},{
xtype : 'fieldcontainer',
items : [ {
xtype: 'label',
text : 'hi'
},
{
xtype: 'textfield',
flex: 1,
itemId: 'valueField',
width : 400
}]
}]
});
},
scope : k_panel
}
}
]
},
{
xtype: 'toolbar',
flex: 1,
dock: 'bottom',
items: [
{
xtype: 'tbfill'
},
{
xtype: 'button',
disabled: false,
id: '',
itemId: 'submitButton',
iconCls: 'silk-magnifier ',
formBind: true
},
{
xtype: 'button',
itemId: 'clearButton',
iconCls: 'silk-cross'
}
]
}
],
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
id: 'typeContainer',
autoScroll: true,
layout: {
type: 'anchor'
},
items : [{
collapsible : true,
flex : 1,
title : 'test',
xtype: 'fieldset',
items : [{
xtype : 'checkbox',

},{
xtype : 'fieldcontainer',
layout : 'fit',
items : [ {
xtype: 'label',
text : 'hi'
},
{
xtype: 'textfield',
flex: 1,
itemId: 'valueField'
}]
}]
}],
flex: 1
}
]
});
var window = Ext.create('Ext.window.Window', {
layout : 'fit',
height : 201,
width : 432,
items : [k_panel],
renderTo: Ext.getBody()
});
window.show();
});
HELPFUL INFORMATIONScreenshot or Video:

attached
Debugging already done:

none
Possible fix:

not provided
Additional CSS used:

only default ext-all-gray.css
Operating System:

OSX

mitchellsimoens
15 Mar 2012, 11:51 AM
What version of OS X? In Lion the scrollbars are overlaid over the content and don't take any space.

jej2003
15 Mar 2012, 12:24 PM
Snow Leopard is the version that I'm running but the version of Mac doesn't seem to make a difference. I've tested this on Lion as well and get the same results. I can provide screenshots of lion if that's helpful.

mitchellsimoens
16 Mar 2012, 5:02 AM
I tested on Lion and I couldn't reproduce.

jej2003
16 Mar 2012, 6:59 AM
I just ran this on lion and got the following. Did you click the - button? I see this on both Safari and Chrome. What browser did you test on?

32819

jej2003
28 Mar 2012, 12:47 PM
Has there been any changes on this? Can you reproduce it?