我有一个下拉列表,由数据库填充。它的值字段包含记录的ID,其选项字段包含记录的文本。但是记录的文本条目非常长,使下拉列表变得非常宽,完全改变了我的网页的外观。当我缩小宽度时,也会缩小显示的文本。有没有办法让网页看起来好看,同时仍然允许用户查看完整的文本(例如换行、滚动或类似的东西)? 我该如何处理这个问题?
尝试使用CSS为下拉菜单添加固定宽度,例如:
select {width: 150px}
虽然下拉菜单本身的宽度是固定的,可能无法显示所有文本,但选项元素应该扩展到最宽元素的宽度。
在IE7及以下版本可能无法正常工作,在这种情况下,此链接可能对这些浏览器有所帮助:
您可以考虑设置固定宽度,然后设置title属性以提供工具提示功能,这样当鼠标悬停时,文本就会显示出来。
在绑定/填充下拉列表后,您可以为每个项目设置自己的文本title属性:
foreach (ListItem li in ddl.Items)
{
li.Attributes.Add("title", li.Text);
}
如果文本非常错误,我认为您可能需要考虑一种不同的方法,而不仅仅是在DropDownList
中显示所有内容。
您可以让DropDownList
仅显示文本的一小部分作为摘要,然后在用户更改项目时在列表旁边显示完整文本。我建议使用AJAX来保持用户体验良好。
为此,请将DropDownList
和列表右侧的Label
包装在一个UpdatePanel
中。然后,DropDownList
的onSelectedIndexChanged事件将类似于以下内容:
protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e)
{
var item = _DB.GetItemFromDB(DropDownList1.SelectedValue);
Label1.Text = item.Text;
}
Name | Id | Cover Letter
----- ------ ----------------------------------------------------
Rex | 1000 | I am seeking opportunities in t... (click for more)
你可以手写代码,但是有很多工具可以使这变得容易,特别是如果你熟悉 JQuery。我在浏览 JQuery windows and overlays plugins 时发现了以下内容:
我之前写了一篇文章,你可能会觉得有用:http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
这是一个jQuery插件,可以创建一个可样式化的无序列表,并支持隐藏的选择元素。
源代码在Github上:https://github.com/tncbbthositg/GiantDropdown