PDA

View Full Version : [Solved]ComboBox donīt show options items (<div style="height: 0")



d_a_g_a_h_e
6 Sep 2010, 7:57 AM
Hi, iīm coding some components using ExtJS, some of them use ComboBoxes to select some options, all appear rendered ok but, when i click to show options there is not options visible. Navigating into HTML (firebug) i can see that layer containing the combo options is added to DOM with height = 0 (options donīt appear). The curious (for me) is when i type backspace into combo to delete the selected options, some events are triggered and layer height is updated, if i delete all character the combo show all options.

- Iīm using Liferay + Spring Portlets (with ExtJs presentation).
- Combox are rendered always inside toolbar or panel.

Can i get all options diplayed when user click in the combo trigger button?. Below is the js code used to create the combo and the DOM elements.





var combo = new Ext.form.ComboBox({
store: new Ext.data.ArrayStore({
id: 0,
data: this.fields,
fields: ['name','desc']
}),
id: this.id + '-search-tb-combo',
triggerAction: 'all',
typeAhead: true,
displayField:'desc',
valueField: 'name',
mode: 'local'
});

<div class="x-layer x-combo-list " id="ext-gen915" style="position: absolute; z-index: 11000; visibility: visible; left: 386px; top: 207px; width: 168px; height: 0px; font-size: 11px;">
<div class="x-combo-list-inner" id="ext-gen916" style="width: 168px;">
<div class="x-combo-list-item">NOMBRE</div>
<div class="x-combo-list-item">NIF</div>
<div class="x-combo-list-item">LOCALIDAD</div>
<div class="x-combo-list-item">TITULO</div>
</div>
</div>

laurentParis
6 Sep 2010, 8:14 AM
try to add property


hideMode: 'offsets'

d_a_g_a_h_e
6 Sep 2010, 8:31 AM
Thank Laurent, but it's not the solution. I have render the combo outside toolbar but the problem persist.

Condor
6 Sep 2010, 9:55 AM
Are you rendering the combobox into an element that is hidden with display:none? Try hiding it with class="x-hidden" instead.

d_a_g_a_h_e
7 Sep 2010, 12:50 AM
Hi Condor, i think there is not element containing the combobox with display:none. I search into html and only some div into the head of page have this style. I mention above that after combo is rendered when i type backspace to delete selection and look for other options the combobox list is diplayed OK (height take value other than 0px). Then and only after the list is diplayed throught typing, clicking in the button work fine (because height value already have value).

Regards

d_a_g_a_h_e
8 Sep 2010, 3:27 AM
Any hints?.

I can send (as private message) the url to check what is happening.

Regards

Condor
8 Sep 2010, 3:32 AM
Send me a PM (url must be port 80 because of firewall limitations).

d_a_g_a_h_e
9 Sep 2010, 4:26 AM
The problem was fixed upgrading prototype.js to 1.5.1.2.

Hint from Condor
--------------------
Your Prototype library replaces Array.shift() with an implementation that doesn't support an empty array.
--------------------

Thanks

Condor
9 Sep 2010, 4:37 AM
I wouldn't recommend the latest Prototype version (It has a conflict with Ext concerning the Function.prototype.defer method).

The safest version to use with Ext is Prototype 1.5.1.2.