View Full Version : DateField size issues.

28 Jun 2010, 5:17 AM

I have noticed what I consider like a bug in the DateFiled object (and more generally in object inheriting from TriggerField, at least my objects inheriting from TriggerField do have the same issue.)
When those component are rendered, the wrapping div of the component has a width set to "17px"
Here's a copy of the the resulting markup of a simple DateField :

<div class="x-form-field-wrap x-form-field-trigger-wrap " id="ext-gen120" style="width: 17px;">
<input type="text" name="slaFromDatePicker" id="slaFromDatePicker" autocomplete="off" size="10" class=" x-form-text x-form-field" style="width: 75px;">
<img class="x-form-trigger x-form-date-trigger " src="./js/extjs/resources/images/default/s.gif" id="ext-gen121">
</div>If you look at the wrapping div you see this <<style="width: 17px">> that I am talking about.
No matter what width you set to the object, the div will still have this 17px width (the inside component will adapt itself to the width)
Deleting this style attribute (on the fly with firebug or the IE developing tool) doesn't alter the display at all, on the contrary.

So I am wondering why is this width forced and how can I remove it, because it gives me trouble :((

Thanks for any input :)

I am instantiating the DateField using it's constructor :

new DateField({applyTo: 'input_text_id'}); where input_text_id is the id of an <input type=text ... />

28 Jun 2010, 5:56 AM
TriggerField can't handle being rendered to an element that is hidden with display:none.

Browsers return width:0px for these elements, so the total width will become 0px + <trigger-size> = 17px.

Either render the component to a visible element or specify a width in the config object.

29 Jun 2010, 12:42 AM
Thank you condor for your answer.

But my component isn't hidden and none of it's parent either.
Still it is a particular case, as the component is injected lately (after a user's action) in the page via the Tapestry5 reloading zone.
I don't think it has any impact but still, I'd rather mention it just in case.

I set a beak-point in the "initComponent" method of my component inheriting from TriggerField.
When the debugger reach the very first line of the method, I can see that the field is rendered and visible but the Ext component renders with the 17px width.

When you suggest me to set a width in the component's config object, do you mean something like this :

new DateField({applyTo: 'some_id', width: 100});I tried this before and unfortunately, it sets the width of the input text of the component to 100 - 17 = 83 (so that field + button = 100) but it leaves the width of the wrapping div to 17.

I'm going to make few more trials.

Any suggestion is welcome. :)