定位jQuery UI小工具

我有一個顯示多列的自定義jQuery UI自動完成。這很好，因爲另一個開發人員是創建它的人，但我想改變。定位jQuery UI小工具

當前自動完成下拉菜單位置本身，因此左上角與輸入文本框的左下角對齊。但是，由於下拉寬度（顯示七列）超出了頁面的右側，遠遠超過了較小的顯示器，因此它將不在屏幕上！

我可以輕鬆地重新定位輸入框，但我正在尋找重新定位下拉式UI。但我想不出如何。這裏是什麼樣子的截圖：

沒有我在jQuery用戶界面工具箱（.offset()，.position()）努力嘗試，因爲我似乎無法得到下拉菜單中選擇參考本身。我嘗試了_create方法，_renderMenu，目標與.mcautocomplete()輸入後......我最終偏移輸入框，出現錯誤，或什麼也沒有發生。

JSFiddle

來源

2015-12-23 Draco18s

我不能檢查的照片。你能爲此創建一個[mcve]嗎？或者，如果更簡單，您能否爲下拉UI元素提供CSS選擇器？ –

下拉菜單是用jQuery UI創建的。它沒有唯一的標識符。我吃完午飯後會把小提琴放在一起。 – Draco18s

@AndreiGheorghiu添加了小提琴。下拉菜單中只有一項（「項目」），因爲我必須將其與MVC後端分開。 – Draco18s

你可以使用這個邏輯類添加到您的自動完成：

$(elem).autocomplete({ 
    source: ... 
}).autocomplete("widget").addClass("whatever");

之後，你可以風格了特定自動完成。這裏有一個例子：

.whatever { 
    position: absolute; 
    left: 0!important; 
}

如果你想它爲中心，知道你的頁面的寬度，你可以去：

.whatever { 
    position: absolute; 
    left: 0!important; 
    right: 0!important; 
    width: 900px; /* or whatever your page has */ 
    margin: 0 auto!important; 
}

的important s爲需要覆蓋由jQuery的自動完成添加內嵌樣式本身。

來源

2015-12-23 18:45:55

嗯。雖然這在小提琴裏工作，它*不*工作在我的實際應用程序中，至少不會添加到CSS文件。 – Draco18s

這基本上意味着你無法提供[mcve]。您錯過了「完整」部分。 :) –

感謝明顯的聲明。我試圖找出爲什麼這不起作用，因此「嗯」。 Chrome的檢查器中未顯示新樣式，但它應適用於該對象。此外，這將推動它一直到窗口的左側，我也不想要。 – Draco18s

jQuery UI自動完成包括一個position option，它使用position utility來定位自動完成彈出窗口。

添加這樣的事情你的選擇（demo）：

position: { my : "center top", at: "right bottom" }

來源

2015-12-23 19:30:01 Mottie

啊哈，我試圖找到這個，但發現只是「close」（'.position（）'方法）的東西，然後無法獲得對UI對象的引用。我沒有看到它可以作爲一個選擇。感謝您的替代解決方案。 – Draco18s

定位jQuery UI小工具

回答

相關問題