PDA

View Full Version : [3.0rc1] DateField applyToMarkup funkiness



hugo_alvarado
29 Apr 2009, 7:48 AM
Hi all,

I have some textfields which I convert to datefileds automatically, it all has worked well up to 3.0rc1.

The problem is that now after creating the datefilelds, the trigger (the small calendar icon on the right of the textfield) is showing over the textfield, not to the right of it. Here is a pic:
http://i44.tinypic.com/j5wb9l.jpg

The first datefield fine, the only difference is that there is no <label> before the text field.

This is the html code:


<li>
<input name="data[ItemForm][form_date0]" id="ItemFormFormDate0" value="2009-04-29" type="text" class="datefield" />
</li>

<li>
<label>Fecha<em>*</em>:</label>
<input name="data[ItemForm][form_date]" id="ItemFormFormDate" value="2009-04-29" type="text" class="datefield" /></li>




This is how I create the date field.


var dh = Ext.DomHelper;
var els = Ext.get(Ext.query("input.datefield"));

for(var i=0; i<els.elements.length; i++)
{
var el = els.elements[i];
var d = new Ext.form.DateField({
el: el.dom,
allowBlank: false,
format:'Y-m-d'
});
d.applyToMarkup(el);
/*
fix for date picker in 3.0 ext js, this pushes the trigger to the right so it looks normal again
*/
d.trigger.setLeft(328);
}


It is probably a CSS thing with my label because if I remove the label's css the fields render fine (but bellow the label not to the right of it like I want...)



label{
width: 150px;
display:table;
float:left;
clear:left;
vertical-align: top;
padding-left: 10px;
}


Any ideas on what I need to change to my css to have the trigger respect the label width and not have to move it to the right via js?

Thanks!

mystix
29 Apr 2009, 6:18 PM
does position:relative; work?

if it doesn't you might want to expect the markup + css for an actual Ext.form.Field in an Ext.form.FormPanel for clues.