Combobox within accordion doesn't display correctly

Hi all,

I have a combobox (built from initialising a select box)

that is inside an accordion (which has a lot of content so has a vertical scroll bar)

and the accordion is part of a layout.

Now the issue is when you click on the combobox initially, it displays fine and is in the correct place, but when you scroll down the accordion (the combobox naturally scrolls up accordingly) however when I then click on the combobox, the drop down appears in the wrong place (it appears in the original place it did before I scrolled the accordion)

it’s as if the dropdown div doesn’t have the position updated when you scroll the accordion.

any help please?

Hi
Can’t reproduce your issue. My demo i made is work. See it, please.
layout_accord_combo.rar (84.7 KB)

Hi,

Move your combo box to the middle of the content

and run it in chrome

it will fail for you as well then

Update on this:

if you open the comobox drop down and then scroll the accordion (without closing the dropdown)

then the dropdown div does not stay attached to the combobox when you scroll

this also happens in firefox as well as chrome (and probably ie)

Try to add in doOnLoad function the next rows:

document.getElementById("comboDiv").onscroll = function () { myCombo.closeAll(); }

Hi,

would you be able to amend the previous attached example to show your solution working.

I’m not sure how to stitch that solution in as I have multiple combo boxes on the same page

Ignore my last post, i’ve figured out how to stitch it in.

however, this doesn’t solve the problem in Chrome where the dropdown div does not display in the correct place when you have scrolled the accordion

any ideas on how to fix that?

Can’t reproduce your last issue - see my attached demo.
layout_accord_combo.rar (84.7 KB)

You’re not trying your example in Google Chrome

Try it in chrome and you will see the error.

As soon as you scroll and then click the combobox dropdown, the div does not attach to the bottom of the dropdown properly.

see the image at

imagebin.org/index.php?mode=image&id=208622

(you may need to refresh the link when you go to it if it appears blank, something wrong with imagebin maybe?)

The problem was found and corrected. Download the attached file and replace it in the library.
dhtmlxcombo.rar (9.56 KB)

Hi,

Glad you’ve found it and fixed it, however I use the dhtmlxcombo_full.js (as it’s much smaller in size)

any chance you could post a fixed one of those or does this fix go into the downloadable product so I can just redownload?

Try attachment, please
dhtmlxcombo.rar (9.56 KB)

Hi,

I tried your latest attachment and I get a JS error

dhtmlXComboFromSelect not found

I don’t think your upload matches the dhtmlxcombo_full.js that you get when you download the full codebase from the website. The js file I have is compressed and still over 80k in size

If you want a full file за Combo - you may collect it with our dhtmlxCompiler: docs.dhtmlx.com/doku.php?id=othe … ibcompiler
Concerning updatings of versions on a site: full package is updated only with release.

ok cool, I’ll give that a try

thanks for your help! :slight_smile:

Hi,

There is an issue with Combobox within accordion in IE7

When you scroll the accordion pane, the combobox does not scroll with the window in IE7 standards mode.

This is present in your attached example in this thread.

Is this a known issue?

Hi,

There is an issue with Combobox within accordion in IE7

It is IE7 bug. Please add position:relative style for div with overflow:

...

That seem’s to have solved it :slight_smile:

thanks very much!

How do you add this “Position:relative” fix if I’m using

dhtmlXComboFromSelect(…)

As there doesn’t seem to be any way of telling it this information?

And I have to use ComboFromSelect for what I’m doing, I can’t use the attachObject method as seen in your example.

Does anyone have a fix for this issue? The more comboboxes you add to an accordion in ie7 create more and more problems.

I need a way of applying this IE7 fix to a combobox if it is generated from a select box and not by attaching the object as seen in the example code.