Toolbar ButtonSelect Item List too large for display

Hi,

I have created a list of about 40 items within the Toolbar ButtonSelect group (drop down list of accounts).

Unfortunately this list does not fit the browser hence drop down appears on click, but then quickly dissappears… Is it possible to add a scroll bar or have a two column drop down list ?

many thanks
andy

var tbarxml = “”;
tbarxml += “”;
tbarxml += “”;
tbarxml += “”;
:
: many repeats
tbarxml += “”;
: many repeats
:
tbarxml += “”;
tbarxml += “”;
toolbar.loadXMLString(tbarxml);

Hi

After a bit of poking and proding (and head scratching) i realised i was missing the obvious … the css for the toolbar !!!

For those interested i changed the following in the css : - Setting the overflow to auto and specifying a default width / height forced the drop down div to scroll… wahey.

/* button select polygon */
div.dhx_toolbar_poly_dhx_skyblue {
position: absolute;
margin: 0px;
padding-bottom: 1px;
border: #a4bed4 1px solid;
background-color: #eaf2fb;
overflow: auto;
cursor: default;
height: 200px;
width: 150px;
-moz-user-select: none;
}

We have the same problem .

But we cannot set default height/width because we generate content dynamically and cannot know if there’s one entry or 50.

When we set height to 200px e.g. it might be that the last 100px are empty which looks pretty silly.
We tried max-height but it doesn’t seem to work well in IE.

Another problem is that combo diapears when mouse is released if combo is higher than page.
This happens even with a scrollbar (100px e.g.), so it’s not possible to use it properly.

In Firefox everything works fine with max-height:200px and overflow-y:auto.

Is there a solution to this?

Espacially for Toolbar disappearing when releasing mouse in IE if there’s not enough room for content?

Hi,

When we set height to 200px e.g. it might be that the last 100px are empty which looks pretty silly.

You may try to use the following approach to control list height:

var maxNum = 10; var maxHeight = "200px"; toolbar.forEachItem(function(itemId){ if (toolbar.objPull[toolbar.idPrefix+itemId]["type"] == "buttonSelect") { if(toolbar.objPull[toolbar.idPrefix+itemId].polygon.firstChild.firstChild.childNodes.length>maxNum ) toolbar.objPull[toolbar.idPrefix+itemId].polygon.style.height = maxHeight ; } })

Another problem is that combo diapears when mouse is released if combo is higher than page.

I need some sample to reproduce the problem.

[code]

Fullscreen Init html,body { width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; }

[/code]

We’re using 2.6 and have this in dhtmlx_custom.css:

div.dhx_toolbar_poly_dhx_skyblue { border: #a4bed4 1px solid; overflow-y: auto !important; background-color: #e9eff6; max-height:200px !important; }

When window gets too small combo disapears when mouse button is released.
Problem only occurs in IE.

Is there a solution to this? We’re hitting it now too… only on IE…

The solution is to open the list to the bottom. I have attached the demo.
sample.zip (75.6 KB)

I’m sorry, I don’t see any difference between the source you provided and the original post where the user claims to have the issue. What specifically was changed to fix the problem?

We have modified dhtmlxtoolbar.js line 1917

Thank you… it works :slight_smile:

This fixes the issue of the list disappearing after clicking (when too large), but of course the down side is that the list will not entirely be accessible if it doesn’t fit. Is there a workaround or solution for this?


You may set list height (the approach that is provided by Andy Rush in this topic viewtopic.php?f=4&t=12202#p35157)