PDA

View Full Version : [2.0b1][CLOSED] ComboBox Spacing



INeedADip
26 Oct 2007, 8:21 AM
Has anyone else noticed that when you put an Ext.form.ComboBox inside a table the spacing is off in IE.

I can't figure out exactly why. I only have the ext-all.css stylesheet loaded...

Then I put ".x-form-trigger { margin-top: -1px; }" and it solved the problem in IE, but then FireFox is messed up. Has anyone else ran across this? Is there something special I should do?

http://extjs.com/forum/attachment.php?attachmentid=2351&stc=1&d=1193415641

mystix
26 Oct 2007, 8:54 AM
:-/ why don't you try a FormLayout instead?

the ComboBox wasn't meant to be displayed inline (correct me if i'm wrong, but table cell content is displayed inline IIRC).

if you're displaying ComboBoxes inline, you'll have to add custom CSS (as you've done) to handle the trigger image position. to do that, you could use the ComboBox's triggerClass config like so


triggerClass: Ext.isIE? 'ie-trigger-class' : 'other-trigger-class'

INeedADip
30 Oct 2007, 3:43 PM
I noticed it also happens if I do something like:

var p = new Ext.Panel({
title: 'Billing Information',
renderTo: $('billingForm'),
layout: 'form',
defaults: {width: 230},
defaultType: 'textfield',
bodyStyle:'padding:5px 5px 0',
width: 420,

items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
})
],

buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]

});
And the 'billingForm' is in a table.

INeedADip
30 Oct 2007, 3:51 PM
I fixed by adding:


.ext-ie TD .x-form-text { POSITION: relative; TOP: 0px}

to counter act the one in ext-all.css that is:


.ext-ie TD .x-form-text { POSITION: relative; TOP: -1px}

mystix
30 Oct 2007, 9:05 PM
I fixed by adding:


.ext-ie TD .x-form-text { POSITION: relative; TOP: 0px}

to counter act the one in ext-all.css that is:


.ext-ie TD .x-form-text { POSITION: relative; TOP: -1px}

hmmm... note that that's going to affect all other Combos which aren't in tables in IE...

INeedADip
30 Oct 2007, 9:25 PM
But I thought the 'TD' in the style makes it only effective inside table cells?

mystix
30 Oct 2007, 10:52 PM
d'oh. my bad. :">

that was before i had my ~o)