2009-07-12 39 views
1

可能重複:
Recommendations for dropdown menu items that are too wide?如何處理下拉列表控制長文在ASP.NET

我有一個下拉列表,它是由數據庫填充。它的值字段包含記錄的ID,其選項字段包含記錄的文本。但是記錄的文字條目非常長,並且使得下拉範圍很大,從而完全改變了我網頁的外觀。當我減小寬度時,它也減少了顯示的文字。有沒有什麼辦法可以讓網頁看起來不錯,並仍然允許用戶看到全文(如包裝,滾動,或類似的東西)?

我該如何處理?

回答

4

嘗試使用CSS來固定寬度添加到您的下拉列表中,這樣的:

select {width: 150px} 

雖然下拉本身將是一個固定的寬度,並且可能不會顯示所有的文字,選擇元素應擴大到最寬元素的寬度。

可能無法在IE7工作,以下,在這種情況下this link可能會有一些使用這些瀏覽器:

+0

當列表是多選項時會發生什麼?這種項目一直是「開放」的,CSS寬度適用於其開放寬度。 – Jason 2013-10-14 13:30:24

0

如果文字是非常錯誤的,我想你可能要考慮不同的方法,而不是僅僅將其全部顯示在DropDownList中。

您可以讓DropDownList僅顯示文本的一小部分作爲摘要,然後在用戶更改項目時在列表旁邊顯示全文。我會建議使用AJAX來保持用戶體驗。

爲此,請將DropDownListLabel包裝到UpdatePanel列表的右側。然後,DropDownList的onSelectedIndexChanged事件將是這個樣子:

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e) 
{ 
    var item = _DB.GetItemFromDB(DropDownList1.SelectedValue); 
    Label1.Text = item.Text; 
} 
0

一個愉快的替代方案是,以顯示你的列中的文本中的一部分,加表示,他們可以看到更多的按鈕或某種圖形通過懸停在單元格上或點擊某物。

例如:

Name | Id | Cover Letter 
----- ------ ---------------------------------------------------- 
Rex | 1000 | I am seeking opportunities in t... (click for more) 

你可以手工編寫這一點,但使這個容易,特別是如果你舒適的使用jQuery有很多的工具,在那裏。我發現下面的只是快速瀏覽JQuery的windows and overlays plugins

0

您是否考慮過顯示最初的幾個字符,然後在選擇該項目時使用工具提示顯示完整的字符串?

1

您可能會考慮設置固定寬度,然後設置title屬性以提供工具提示類型的功能,以便文本在懸停時顯示。

結合/填充你可以設置每個項目的title屬性自己的文字下拉列表後:

foreach (ListItem li in ddl.Items) 
{ 
    li.Attributes.Add("title", li.Text); 
} 
+0

很久以前我做了這個,在我的代碼中找不到它。感謝您的提醒! – 2013-05-09 21:17:33