Question

我正在使用ASP:DropdownList(Code Behind Approach)，其中有一些与之相关的事件，我的问题是我的全文在下拉列表中不可见，这是由于下拉列表的宽度，我不能增加所以怎么能我会显示全文我搜索了这个链接

http://jquery.sanchezsalvador.com/jquery/page/jquerycomboboxexamplestyle.aspx

在我使用Jquery ui Widget的一个地方，但我的事件没有被解雇，因为它最终呈现文本框。

有没有人有任何解决方案？

提前致谢

CSS Class

.dropdown
 {
    border: #000000 1pt solid;
    font-weight: normal;
    font-size: 13px;
    vertical-align: middle;
    font-style: normal;
    font-family: verdana;
    text-align: left;
    height: 22px;
    overflow:visible;
}

Answer 1

无需为此问题实施任何混乱的逻辑。答案很简单。只需删除.aspx页面中ASP：DropdownList中的属性“Width”即可。下拉列表将扩展到添加到其中的最大项目的宽度。

同时删除添加到下拉列表的Css类的宽度属性。

Answer 2

根据我的理解，您可以通过显示您的选项文本来解决问题。

这些是你的选项的样式类

comboboxDropDownItemClass: "comboboxItem", 
comboboxDropDownItemHoverClass: "comboboxItemHover",

这是你的选项样式表。

.comboboxItem { background:#fff; color:#000; text-transform:lowercase; 
                font-weight:normal; font-style:normal; overflow:visible; } /* here is ur text visibility */ 

.comboboxItemHover { background-color:#999; color:#fff; text-transform:uppercase;
                     padding-left:4px; overflow:visible; } /* here is ur text visibility */

以及将overflow:visible;放在那里需要做什么。

如果仍然没有解决，只需更改应该完成工作的comboboxItem的宽度。

Answer 3

你可以搞乱字体大小，以便自动适应＆＃34;下拉列表的宽度。

要实现这一点，只需在选择项目时减小字体大小，直到它适合：

$(document).ready(function() {
    $(".dropdown").each(function() {
        $(this).data("org_fontsize", $(this).css("font-size"));
    });


    $(".dropdown").change(function() {
        var ddl = $(this);
        var fontSize = parseInt(ddl.css("font-size"), 10);
        if (!isNaN(fontSize)) {
            var originalWidth = ddl.outerWidth();
            ddl.css("width", "auto");
            var currentWidth = ddl.outerWidth();
            if (currentWidth > originalWidth) {
                while (currentWidth > originalWidth) {
                    fontSize--;
                    if (fontSize < 2)
                        break;
                    ddl.css("font-size", fontSize + "px");
                    currentWidth = ddl.outerWidth();
                }
            }
            else {
                ddl.css("font-size", ddl.data("org_fontsize"));
            }
            ddl.css("width", originalWidth + "px");
        }
    });
});

这也会恢复不超过宽度的项目的原始字体大小。

Live test case

文本不适合ASP：DropDownList

3 个答案: