PDA

View Full Version : FireFox 3 DateField Layout Problem



hoghweed
17 Mar 2009, 6:52 AM
Hi,
this my first post here, so I hope you can be patient with me if I do someting wrong ..

I have a layout problem with DateField object, in Firefox the normally right-side icon is showed on the left side of the control, and this cause the icon to be over the text I could enter in the field, the same code which produce the DateField works well on IE7.

This is the problem in few words, now I want to explain the problem in details:
1. I'm using DateField to be be applied to existing Html elements
2. In the specific case the elements are simple input elements not wrapped by any div
3. The same problem I have each on DateField or simple TriggerField elements
4. The following code is what I'm doing to "wrap" elements, in the case the code is just for DateField:



// Get an array of all input text fields using DomQuery
var dateBoxes = Ext.DomQuery.select("input[class=dateField]");

// An array to keep track of all ExtJs Text Fields
var ExtDateFields = Array();

// Now loop through each element and make it Ext TextField
Ext.each(dateBoxes,
function(item, index, allItems) {
ExtDateFields[index] = new Ext.form.DateField({
allowBlank: false,
applyTo: item,
fieldLabel: 'Date of Birth'
});
//ExtDateFields[index].render();
});


Firebug generated Html is shown in the attached FirebugCode.jpg


On the attachments could be viewed the problem, the "DateFieldProblem.jpg" shows the issue on Firefox3 and the "DateFieldIE7.jpg" shows the same on IE7 which works well.
I don't know if Firebug could cause layout problems on Firefox for Ext... but I don't think
Please, I hope anyone could help me
Bye

17 Mar 2009, 7:18 AM
Do you have any other CSS other than Ext? Can you duplicate on a vanilla page?

hoghweed
17 Mar 2009, 8:12 AM
I have another css but, I don't know all the internal Ext css structure, so I can't imagine what could be the disturbing feature... Please tell how could a vanilla page to reproduce..
Thanks in advance