PDA

View Full Version : [OPEN] Elements in Panels with TPL content Automatically Float Left



lylepratt
21 Nov 2011, 11:03 AM
I'm not sure if "float left" is the correct term here. But basically, if you have content in a TPL in a panel, all that content looks like it has "float: left" applied to it. After looking deeper into the CSS, its actually because the parent container has "display: -webkit-box;" applied. If you remove that declaration, it seems to work fine.

As an example you can take set up a simple panel and alternate the same content from TPL to HTML and see how the format changes (the content in HTML is correct).

This may not be a bug, but it definitely is different from how ST1 works and it feels like a bug just because its so odd. You can alleviate the problem if you wrap all of your tpl content in an element with "display: block".

Example:



Ext.application({
name: 'app',
controllers: [],
launch: function() {
console.log('app launch');


Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});


var store = new Ext.data.JsonStore({
model: 'Contact',
sorters: 'lastName',


getGroupString: function(record) {
return record.get('lastName')[0];
},


data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'},
{firstName: 'Jamie', lastName: 'Avins'},
{firstName: 'Aaron', lastName: 'Conran'},
{firstName: 'Dave', lastName: 'Kaneda'},
{firstName: 'Jacky', lastName: 'Nguyen'},
{firstName: 'Abraham', lastName: 'Elias'},
{firstName: 'Jay', lastName: 'Robinson'},
{firstName: 'Nigel', lastName: 'White'},
{firstName: 'Don', lastName: 'Griffin'},
{firstName: 'Nico', lastName: 'Ferrero'},
{firstName: 'Nicolas', lastName: 'Belmonte'},
{firstName: 'Jason', lastName: 'Johnston'}
]
});


var panel = new Ext.Panel({
fullscreen: true,

//Uncomment this and comment out the TPL to see how it is supposed to look
//html: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',

//Content in a TPL is oddly floating left.
tpl: '<h1 style="margin: 5px; padding: 5px; border: 1px solid #000;">Fest</h1><div class="contact" style="margin: 5px; padding: 5px; border: 1px solid #000;">{firstName} <strong> {lastName}</strong></div>',
initialize: function() {
console.log('initialized');
this.setData(store.getAt(0).data);
}
});
}
});

Jamie Avins
21 Nov 2011, 11:18 AM
Thank you for the report.

rdougan
21 Nov 2011, 3:27 PM
It might have been fixed since PR2, but this is how it looks for me right now (correct):

http://f.cl.ly/items/3619141K3Y2u45143p1G/Screen%20Shot%202011-11-21%20at%203.26.13%20PM.png

lylepratt
21 Nov 2011, 4:09 PM
Hmm. Very weird. I am using PR2. I tested on Safari OSX, iOS 5.0, and Android 2.3.

rdougan
21 Nov 2011, 4:10 PM
It was probably fixed since PR2. I'll test it on PR2 in just a minute..

rdougan
21 Nov 2011, 4:32 PM
Yup, confirmed. Already fixed. :)

lylepratt
21 Nov 2011, 5:54 PM
Awesome. Thanks for looking into this!