View Full Version : [CLOSED][3.0rc1] ComboBox transform not setting width

1 May 2009, 5:13 AM
We recently switched to using Ext 3.0 and noticed that those combobox objects that I transform on our page where not being rendered properly. The arrow appears on the left side of the combobox as opposed to the right side. When I inspect the element it seems that the width is being set to 0px. I also notices the same mal-behavior on the toolbar when I use a combobox.

Here is the div element for that wraps the combobox object.

<div id="ext-gen383" class="x-form-field-wrap" style="width: 0px;">


1 May 2009, 5:29 AM
Are the comboboxes hidden with display:none while you are rendering/applying them?

4 May 2009, 10:39 AM
nak1 -

Could you please post a showcase?

14 May 2009, 4:10 PM
Condor - I'm not setting the style display before the form fields are transformed.

It also seems to occur on the date transformations as well. I've inspected the code and it seems that it's setting the style's width attribute to 0px. Here's a code snippet of the rendered code for a state dropdown:

<td class="data" id="ext-gen115">
<div class="x-form-field-wrap" id="ext-gen116" style="width: 0px;">
<input type="hidden" id="address_stateid" name="address_stateid" value="TX"/>
<input type="text" value="" class="company_state_field x-form-text x-form-field small" id="ext-gen114" autocomplete="off" style="width: 50px;"/>
<img class="x-form-trigger x-form-arrow-trigger" src="/images/s.gif" id="ext-gen117"/></div>

It wasn't doing that when we were running Ext 2.0. Any thoughts? Also, aconran, I'm not familiar with Showcase? What would you like to see?

14 May 2009, 4:37 PM
Also, aconran, I'm not familiar with Showcase? What would you like to see?

I think he meant testcase...

14 May 2009, 9:40 PM
I'm using the following field:

<select class="property_combo_field" width="50" allowBlank="false" minListWidth="50" mode="local" name="property_floor_ct">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

I then query the various combo boxes that I want to transform using Ext.query('.class_combo_field'), then I loop through the query results and pass in the DOM node into the 'transform' element

var tempattributes = {
,typeAhead: true
,forceSelection: true
,triggerAction: 'all'
,emptyText:'Please select'
//,mode: 'local'
,msgTarget: 'qtip'
,selectOnFocus: true
,hidetrigger: false
,modal: local
,transform: DOM ELEMENT
,typeAhead: true
,invalidText: 'Please select a value for this field'

var tempobj = new Ext.form.ComboBox(tempattributes)

This used to work great with the old rev, but now all my selectors are on the left hand side of the combo boxes, rather then the right hand side, due to the style="width:0px" issue.

18 May 2009, 3:59 AM
I'm wondering if it's the same issue as described in the following thread:

If so, what's the best way to resolve that?

12 Jun 2009, 7:36 PM
Are you still experiencing a problem with RC2?

If so, would you please post a working test case, an example is shown here:

16 Aug 2009, 11:43 AM
This thread has remained in INFOREQ status for some time now and I don't see any test case posted as requested per http://extjs.com/forum/showthread.php?p=341947#post341947 or any new information posted.

I'm going to update the status to CLOSED in absence of new information / test case. Please post again to have the issue reopened.

2 Feb 2010, 1:21 AM
i had the same problem, i have some comboboxes applied to div already set to display:none, when i display thes div the width of the div conatining my comboboxes turn to this

<div class="x-form-field-wrap x-form-field-trigger-wrap" id="ext-gen4" style="width: 0px;">

while i set the dive to a certain width > 0.

i am adopting the solution to leave all displayed and hide after extjs works, but it's not the best solution.

Condor mentioned the display, but then he didn't answer, so i ask for an help.

thank you very much


2 Feb 2010, 4:56 AM

I can't say I like this solution, but I resize the comboboxes after this are displayed. It was a pain, but it worked.

2 Feb 2010, 11:28 PM
you're totally right! ... :-?
anyway it works, so thank you

3 Feb 2010, 8:28 AM
@axelaxel: Components rendered into a display:none; <div> cannot be sized properly simply because that <div> has absolutely no dimensions -- think of it as a single point in space. you need to render Components into <div>s which are hidden either via a) negative page offsets, or b) style="visibility:hidden;" in order for the <div> to have dimensions.

try giving that <div> a class of "x-hide-offsets" instead, then remove that class to show the <div>.
you might also want to give the <div> a specific height/width (just in case).