Hello,
We are upgrading our web application from dhtmlxSuite 3.0 to 4.2 and we have noticed the enableOptionAutoWidth() and enableOptionAutoHeight() methods are no longer supported for the dhtmlxCombo.
How do we achieve the same functionality in the 4.2 version of the dhtmlxCombo that was previously provided by the enableOptionAutoWidth() and enableOptionAutoHeight() methods?
Thanks!
Hi
that’s correct, functions were deprecated.
anyway, here is an example
attach events to your combo
myCombo.attachEvent("onOpen", checkWidth);
myCombo.attachEvent("onOpen", checkWidth);
and event body
function checkWidth() {
var w = 0;
if (this.w_test == null) {
this.w_test = document.createElement("DIV");
this.w_test.className = "dhxcombolist_"+this.conf.skin;
this.w_test.innerHTML = "<div class='dhxcombo_option'><div class='dhxcombo_option_text'></div></div>";
document.body.appendChild(this.w_test);
//
this.unload2 = this.unload;
this.unload = function() {
if (this.w_test.parentNode != null) {
this.w_test.parentNode.removeChild(this.w_test);
this.w_test = null;
}
this.unload2.apply(this, arguments);
}
}
this.w_test.style.cssText = "left: 0px; top: 0px;";
this.w_test.style.display = "";
for (var q=0; q<this.list.childNodes.length; q++) {
this.w_test.firstChild.firstChild.innerHTML = this.list.childNodes[q].firstChild.innerHTML;
w = Math.max(w, this.w_test.offsetWidth);
}
if (this.list.scrollHeight+4 > this.list.clientHeight) {
// scroll appear
this.w_test.style.cssText += "height: 66px;";
this.w_test.innerHTML = "<div class='dhxcombo_option'><div class='dhxcombo_option_text'>Long text to detect scroll</div></div>"+
"<div class='dhxcombo_option'><div class='dhxcombo_option_text'>Long text to detect scroll</div></div>"+
"<div class='dhxcombo_option'><div class='dhxcombo_option_text'>Long text to detect scroll</div></div>"+
"<div class='dhxcombo_option'><div class='dhxcombo_option_text'>Long text to detect scroll</div></div>";
w += this.w_test.offsetWidth-this.w_test.firstChild.firstChild.offsetWidth;
this.w_test.innerHTML = "<div class='dhxcombo_option'><div class='dhxcombo_option_text'></div></div>";
}
this.w_test.style.display = "none";
this.list.style.width = Math.max(w,this.conf.combo_width)+"px";
}
I love this great topic to discuss and consistent data.