KendoUI設置下拉列表的寬度

我正在尋找最佳方式來設置KendoUI下拉列表的寬度 - 通過Kendo HTML Helper。KendoUI設置下拉列表的寬度

@(Html.Kendo().DropDownList() 
    .Name("ddlAccount") 
    .DataTextField("Name") 
    .DataValueField("Id") 
    //This doesn't work, it styles the hidden input instead of the ddl 
    .HtmlAttributes(new {style="width:200px;"}) 
)

我設置將DropDownList的在生成的HTML的寬度，但通知，爲200個像素的寬度設置在隱藏的文本輸入，而不是下拉列表：

<span aria-busy="false" aria-readonly="false" aria-disabled="false" aria-owns="ddlAccount_listbox" tabindex="0" aria-expanded="false" aria-haspopup="true" role="listbox" class="k-widget k-dropdown k-header styled_select" style="" unselectable="on" aria-activedescendant="ddlAccount_option_selected"> 

<span class="k-dropdown-wrap k-state-default"> 
    <span class="k-input">Choice One</span> 
    <span class="k-select"> 
     <span class="k-icon k-i-arrow-s">select</span> 
    </span> 
</span> 
<input id="ddlAccount" name="ddlAccount" style="width: 200px; display: none;" type="text" data-role="dropdownlist">

.. 。因此，所產生的DropDownList仍然會水平和垂直滾動，這是我不想要的。

來源

2013-04-29 DShultz

@Html.Kendo().DropDownList().HtmlAttributes(new { style = "width:300px" })對我服務器端工作，並記錄在http://docs.kendoui.com/。可能不會那麼長。

來源

2013-06-15 12:04:52

將JS，從劍道網站：

// get reference to the DropDownList 
var dropdownlist = $("#size").data("kendoDropDownList"); 
// set width of the DropDownList 
dropdownlist.list.width(500);

JsFiddle

來源

2013-04-29 17:54:08 Maess

這將工作，但我期望通過服務器端KendoUI HTML助手設置寬度 – DShultz 2013-04-29 19:05:32

其實問題是頁面中的衝突代碼導致Kendo無法識別ddl/span代碼。我的不好，但你的客戶端答案確實有效，所以我會給你信用。 – DShultz 2013-04-29 19:25:02

HTML助手不在服務器端。他們只是寫javascript的捷徑。服務器端解決方案意味着服務器執行任務，如果您正在討論影響用戶界面，這是沒有意義的。除非你的服務器可以在你的客戶端上運行javascript，從而使得一些瘋狂的基於SignalR/Socket的連接.............：D. – Pluc 2014-08-27 14:30:05

只是想我會添加到這個，因爲它沒有幫我...

如果你想申請的東西，超出了輸入的寬度名單的寬度，你可以使用一個做到這一點jQuery選擇器和一個css類。

注意：這是對ComboBox，但應該工作一樣好與DROPDOWNLIST

所以你添加此

@(Html.Kendo().ComboBoxFor(m => m.UserId) 
     ... 
     .HtmlAttributes(new { @class = "wideList" }) 
    )

然後添加一段JavaScript代碼，這是否：

$(document).ready(function() { 

$("input[data-role=\"combobox\"].wideList").each(function() { 
    var combo = $(this).data("kendoComboBox"); 
    combo.list.width(400); 
}); 

});

爲了更進一步，您可以通過在定義下拉列表時允許指定寬度來使其更加通用：

@(Html.Kendo().ComboBoxFor(m => m.UserId) 
    ... 
    .HtmlAttributes(new { @class = "wideList", listWidth = "400" }) 
)

隨後的更通用的javascript：

$(document).ready(function() { 
    $("input[data-role=\"combobox\"].wideList").each(function() { 
    var combo = $(this).data("kendoComboBox"); 
    var width = $(this).attr('listWidth'); 
    combo.list.width(width); 
    }); 
});

來源

2013-10-31 12:11:19 Martin

在這裏你去：

$("#Dropdopwnlist").kendoDropDownList().parent().css("width", "200%");

簡單，花費一個小時後，對我的作品！

來源

2016-07-22 15:09:36

KendoUI設置下拉列表的寬度

回答

相關問題