dijit ComboBoxまたはFilteringSelectに最低限必要な幅を得るには？

Question

私は、ダイアログボックスでComboBoxとFilteringSelectを使用していますが、コントロールに必要最小限の幅しか持たない、つまりドロップダウンリストから最長のテキストを表示するのに十分な大きさです。また、ドロップダウンリストの実際の内容が翻訳データベースから入力されるため、コントロールを固定幅に設定しないでください。

単純なタイプのテキストを入力するプレーンhtmlでは、デフォルトではスムーズに動作します。しかし、dojotoolkit.orgのすべての例でさえ全く同じ動作を示しているので、dojoはすべての入力コントロールに対して最小幅を導入しているようです。だから私はそれがすべてで完了することができるかと思います...

ありがとうございます！

Answer 1

私は同じ問題がありました。いくつかの闘争の後、私はthisを私の問題に適応させることに決めました。

私の場合、古いバージョンのdojoを使用する必要があり、FilteringSelectは宣言的なので、私の関数が実行されるようにhack（以下のコードの最後の3行）を使用する必要がありました正確な時に。

したがって、以下の関数は全てのdijitウィジェットを取ります。保存された要素を探すと、は表示されない画面の外に移動した新しい要素のコンテンツをコピーし、その要素の幅は、パッドで調整されます（これはあなたのケースではないので、getWidthをチェックしてください）。それらの幅の最大値を取って入力要素の現在の長さと比較し、最も長いオプションが大きければ、入力とdivの最も外側の幅を調整します。

この回答はかなり遅くなっていますが、私がこの解決策に出くわすのは容易ではなかったので、分かち合う価値があると思いました。

// change dropdowns width to fit the largest option 
function fixDropdownWidth() { 
    var getAllDropdowns = function() { 
    var dropdowns = []; 
    dijit.registry.forEach(function(widget, idx, hash) { 
     if (widget.store) { 
     var root = widget.store.root; 
     if (root && root.nodeName.toLowerCase() == 'select') { 
      dropdowns.push(widget); 
     } 
     } 
    }); 
    return dropdowns; 
    }; 

    var getTesterElement = function() { 
    var ret = dojo.query('tester'); 
    if (ret.length) { 
     return ret; 
    } 
    else { 
     document.body.appendChild(document.createElement('tester')); 
     return dojo.query('tester'); 
    } 
    }; 

    var getWidth = function(el) { 
    var style = dojo.getComputedStyle(el); 
    return el.clientWidth + parseInt(style.paddingLeft) + parseInt(style.paddingRight); 
    }; 

    var getOptionWidth = function(option) { 
    var testEl = getTesterElement(); 
    testEl[0].innerHTML = option.innerHTML; 
    return getWidth(testEl[0]); 
    }; 

    var dropdowns = getAllDropdowns(); 
    var testEl = getTesterElement(); 
    dojo.style(testEl[0], { 
    position: 'absolute', 
    top: -9999, 
    left: -9999, 
    width: 'auto', 
    whiteSpace: 'nowrap' 
    }); 
    for (var i = 0; i < dropdowns.length; i++) { 
    var input = dropdowns[i].textbox; 
    dojo.style(testEl[0], { 
     fontSize: dojo.style(input, 'fontSize'), 
     fontFamily: dojo.style(input, 'fontFamily'), 
     fontWeight: dojo.style(input, 'fontWeight'), 
     letterSpacing: dojo.style(input, 'letterSpacing') 
    }); 
    var max = 0; 
    var treshold = 5; 
    dojo.query('option', dropdowns[i].store.root).forEach(function(el, idx, list) { 
     max = Math.max(max, getOptionWidth(el) + treshold); 
    }); 
    if (max > getWidth(dropdowns[i].textbox)) { 
     var icon = dojo.query('.dijitValidationIcon', dropdowns[i].domNode)[0]; 
     dojo.style(dropdowns[i].textbox, {width: max + 'px'}); 
     var width = max + getWidth(icon) + getWidth(dropdowns[i].downArrowNode) + treshold; 
     dojo.style(dropdowns[i].domNode, { 
     width: width + 'px' 
     }); 
    } 
    } 
} 


dojo.addOnLoad(function() { 
    dojo._loaders.push(fixDropdownWidth); 
}); 

Answer 2

var dropDowns = []; 
var getAllDropdowns = function (dropDowns) { 
    array.forEach(dijit.registry.toArray(), function (widget) { 
     if (widget.store) { 
      if (widget.domNode.classList.contains("dijitComboBox")) { 
       dropDowns.push(widget); 
      } 
     } 
    }); 
}; 

getAllDropdowns(dropDowns); 

var maxLength = 0; 
array.forEach(dropDowns, function (dropDown) { 
    var opts = dropDown.get("store").data; 
    array.forEach(opts, function (option) { 
    var optionValue = option[dropDown.get("searchAttr")]; 
    var dropDownCurrentStyle = window.getComputedStyle(dropDown.domNode); 
    var currentOptionWidth = getTextWidth(optionValue, dropDownCurrentStyle.fontStyle, dropDownCurrentStyle.fontVariant, dropDownCurrentStyle.fontWeight, dropDownCurrentStyle.fontSize, dropDownCurrentStyle.fontFamily); 
    if (currentOptionWidth > maxLength) { 
     maxLength = currentOptionWidth; 
    } 
}); 

dropDown.domNode.style.width = maxLength + "px"; 
    maxLength = 0; 
}); 

function getTextWidth(text, fontStyle, fontVariant, fontWeight, fontSize, fontFamily) { 
    // re-use canvas object for better performance 
    var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas")); 
    var context = canvas.getContext("2d"); 
    var font = fontStyle + " " + fontVariant + " " + fontWeight + " " + fontSize + " " + fontFamily; 
    context.font = font; 
    canvas.innerText = text; 
    var metrics = context.measureText(text); 

    return metrics.width + 25; //change this to what you need it to be 
}