樣式dijit.form.Select下拉菜單

如何使用HTML標記來設置dijit.form.Select下拉菜單菜單。樣式dijit.form.Select下拉菜單

<select id="sourceselect" dojoType="dijit.form.Select" style='width:200px' onChange="changeDetected();"> 
</select>

爲了清楚說明它的樣式，下拉菜單中充滿了內容。我想改變菜單的高度，並且如果超過高度，就有一個滾動條。

我正在使用Dojo版本1.6。這是一個小提琴的例子：http://jsfiddle.net/NH7dd/。

編輯：爲什麼是弊端？

來源

2013-10-07 Jacob

由Dojo生成的菜單放置在DOM節點的根目錄中。這是一個常見的錯誤，菜單在某種程度上相對於文本字段定位，但事實並非如此。

如果你想改變菜單的風格，那麼你可以使用下面的CSS選擇器：

div[dijitpopupparent="sourceselect"] > .dijitMenu { 
    /** Your CSS */ 
}

這部作品的原因是因爲菜單上纏繞有dijit/popup內。這個彈出框允許顯示/隱藏菜單，正如你可以看到它有一個屬性dijitpopupparent，它具有該字段的原始ID。

我還更新了您的JSFiddle，現在看起來像this。但我不建議像這樣改變菜單的行爲，因爲你可能會搞亂組合框的原始功能/行爲。我的意思是，現在我遇到了一些問題，因爲一個「滾動打勾」已經傳遞了一個值。隨着更新的風格，我甚至無法正確選擇「2」了。

編輯：在更新的jsfiddle滾動條將始終可見，如果你想滾動條只有當有更多的選擇出現，則改變overflow-y: scroll到overflow-y: auto。

來源

2013-10-09 11:17:31 g00glen00b

非常感謝 – Jacob

您可以設置maxHeight的屬性。

<select id="sourceselect" 
dojoType="dijit.form.Select" 
data-dojo-props="maxHeight: 200" 
style='width:200px' 
onChange="changeDetected();"> 
</select>

另外，dojo的新語法是「data-dojo-type」而不是「dojoType」。

這裏是顯示maxHeight屬性的JSFiddle。（我使用了dojo 1.9，但maxHeight在1.6中可用） http://jsfiddle.net/NH7dd/17/

來源

2013-10-07 18:25:07

對不起，但你的答案不起作用。請參閱示例：http://jsfiddle.net/NH7dd/。 – Jacob

maxHeight的參數應該是一個整數。我編輯了我的答案。你的小提琴不工作的原因是因爲你沒有正確加載dojo。你的小提琴上的選擇只是一個常規選擇而不是道場選擇。 –

樣式dijit.form.Select下拉菜單

回答

相關問題