选择固定宽度的下拉菜单,在 IE 中截断内容
Posted
技术标签:
【中文标题】选择固定宽度的下拉菜单,在 IE 中截断内容【英文标题】:Select dropdown with fixed width cutting off content in IE 【发布时间】:2010-10-15 12:41:44 【问题描述】:问题:
选择中的某些项目需要超过 145px 的指定宽度才能完全显示。
Firefox 行为:点击选择显示下拉元素列表调整为最长元素的宽度。
IE6 和 IE7 行为:单击选择会显示限制为 145 像素宽度的下拉元素列表,因此无法读取较长的元素。
当前的 UI 要求我们将此下拉列表调整为 145 像素,并让它托管具有更长描述的项目。
有什么解决IE问题的建议吗?
即使列表展开,顶部元素也应保持 145 像素宽。
谢谢!
css:
select.center_pull
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
这里是选择输入代码(backend_dropbox 样式目前没有定义)
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
如果您想在浏览器中快速测试,可以使用完整的 html 页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>dropdown test</title>
<style type="text/css">
<!--
select.center_pull
background:#eeeeee none repeat scroll 0 0;
border:1px solid #7E7E7E;
color:#333333;
font-size:12px;
margin-bottom:4px;
margin-right:4px;
margin-top:4px;
width:145px;
-->
</style>
</head>
<body>
<p>Select width test</p>
<form id="form1" name="form1" method="post" action="">
<select id="select_1" class="center_pull backend_dropbox" name="select_1">
<option value="-1" selected="selected">Browse options</option>
<option value="-1">------------------------------------</option>
<option value="224">Option 1</option>
<option value="234">Longer title for option 2</option>
<option value="242">Very long and extensively descriptive title for option 3</option>
</select>
</form>
</body>
</html>
【问题讨论】:
这已在 Stack Overflow 上得到解答:***.com/questions/73960/dropdownlist-width-in-ie 感谢您指出这一点。该解决方案需要包含大量 javascript 库,这是我试图避免的。 看看这是不是你想要的...dropdownwidthproblem.blogspot.com 【参考方案1】:对于 IE 8,有一个简单的纯 css 解决方案:
select:focus
width: auto;
position: relative;
(如果选择框是固定宽度容器的子容器,则需要设置位置属性。)
很遗憾,IE 7 及更低版本不支持 :focus 选择器。
【讨论】:
+1 用于指出:focus
和width:auto
,但是我认为在很多情况下(包括我的)人们会想要使用position:absolute
,而且可能不仅仅是关注焦点。如果您不使用position:absolute
,则额外的宽度可能会导致下拉菜单在浮动到某物(或内联块)的右侧时下拉一行。【参考方案2】:
我在谷歌上搜索过这个问题,但没有找到任何最佳解决方案,因此创建了一个适用于所有浏览器的解决方案。
只需在页面加载时调用 badFixSelectBoxDataWidthIE() 函数。
function badFixSelectBoxDataWidthIE()
if ($.browser.msie)
$('select').each(function()
if($(this).attr('multiple')== false)
$(this)
.mousedown(function()
if($(this).css("width") != "auto")
var width = $(this).width();
$(this).data("origWidth", $(this).css("width"))
.css("width", "auto");
/* if the width is now less than before then undo */
if($(this).width() < width)
$(this).unbind('mousedown');
$(this).css("width", $(this).data("origWidth"));
)
/* Handle blur if the user does not change the value */
.blur(function()
$(this).css("width", $(this).data("origWidth"));
)
/* Handle change of the user does change the value */
.change(function()
$(this).css("width", $(this).data("origWidth"));
);
);
【讨论】:
这很好,但它扩展了实际的选择控件,它将把任何东西推到右边 就像 DaveDev 提到的,如果您有特定的设计,这可能是一个问题,但否则它很有帮助且易于实施,感谢您的代码! 只有当我点击它们时它才会扩展实际的选择控件。我使用 ajax 填充这些选择控件。我目前在 $(document).ready() 函数中调用它!我做错了吗? 您好,zer0c00l,是的,您错过了绑定事件的一部分。在将元素插入 DOM 元素后,您还应该在 ajax 成功时调用此函数。 是的,您错过了一个小的装订问题。在向 DOM 元素插入内容之后,您也应该在 Ajax 成功中调用相同的函数。更多说明可以找到blog.anoopkumarsharma.com/…【参考方案3】:这是一个可以帮助你的小脚本:
http://www.icant.co.uk/forreview/tamingselect/
【讨论】:
谢谢。我想知道是否有人知道无 javascript 的解决方案? 我发现这个解决方案好多了(您不需要更改代码):css-tricks.com/select-cuts-off-options-in-ie-fix【参考方案4】:对于一个简单的无 Javascript 解决方案,根据您的要求,将标题属性添加到保存文本的
<option value="242" title="Very long and extensively descriptive text">
Very long and extensively descriptive text
</option>
这将在悬停
适用于 IE7+。
【讨论】:
【参考方案5】:恐怕不是免费的 javascript,但我设法使用 jQuery 使它变得非常小
$('#del_select').mouseenter(function ()
$(this).css("width","auto");
);
$('#del_select').mouseout(function ()
$(this).css("width","170px");
);
【讨论】:
我喜欢您的 KISS 方法,但尝试选择会触发鼠标移出。试试这个: $.fn.ie_select_expando=function()if(!$.browser.msie)return;var s = $(this);s.data('o',false);s.mouseenter(function() if ( !s.data('owidth') ) s.data('owidth', s.css('width'));s.css("width","auto");).mouseout(function ()if ( !s.data('o') ) s.css("宽度", s.data('owidth'));).blur(function()if ( s.data('o ') ) s.css("宽度", s.data('owidth'));s.data('o',false);).click(function() if ( s.data(' o') ) s.css("width", s.data('owidth'));s.data('o',false); else s.css("width","auto"); s.data('o',true););【参考方案6】:你可以在 jquery 中使用这个插件 ;)
http://plugins.jquery.com/project/skinner
$(function()
$('.select1').skinner('width':'200px');
);
【讨论】:
【参考方案7】:对 MainMa 和 user558204 的代码进行了小但希望有用的更新(谢谢大家),它删除了不必要的每个循环,将 $(this) 的副本存储在每个事件处理程序的变量中,因为它被多次使用,还结合了模糊和更改事件,因为它们具有相同的操作。
是的,它仍然不完美,因为它调整了选择元素的大小,而不仅仅是下拉选项。但是,嘿,它让我摆脱了困境,我(非常非常不幸)仍然必须支持整个企业中以 IE6 为主的用户群。
// IE test from from: https://gist.github.com/527683
var ie = (function ()
var undef, v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
());
function badFixSelectBoxDataWidthIE()
if (ie < 9)
$('select').not('[multiple]')
.mousedown(function()
var t = $(this);
if (t.css("width") != "auto")
var width = t.width();
t.data("ow", t.css("width")).css("width", "auto");
// If the width is now less than before then undo
if (t.width() < width)
t.unbind('mousedown');
t.css("width", t.data("ow"));
)
//blur or change if the user does change the value
.bind('blur change', function()
var t = $(this);
t.css("width", t.data("ow"));
);
【讨论】:
【参考方案8】:另一种方法:
-
而不是选择将其设为编辑框,禁用,因此任何人都无法手动输入任何内容或在选择后更改内容
另一个隐藏编辑以包含所选选项的 ID(如下所述)
制作一个按钮 [..] 并编写脚本以显示下面的 div
在编辑框下方或附近制作一个绝对位置的隐藏 div
使该 div 包含一个样式 size="6" 的选择(以显示 6 个选项和一个滚动条,而不是下拉列表)和一个按钮“选择”,可能还有“取消”
不要设置宽度样式,因此整个事物将采用最宽选项或按钮的宽度以及您选择的一些填充
编写“选择”按钮以将所选选项的 id 复制到隐藏的编辑框,并将其值复制到可见的编辑框中,也可以再次隐藏 div。
总共 4 个简单的 JavaScript 命令。
【讨论】:
【参考方案9】:我找到了一个非常简单的解决方法。在<select>
html 元素中添加这些属性:
onmouseover="autoWidth(this)"
onblur="resetWidth(this)"
所以每当用户点击该宽度会自动扩大,并且用户移出选择框,宽度将被重置为原来的。
【讨论】:
【参考方案10】:可以在此处找到类似的解决方案,使用 jquery 设置焦点(或鼠标输入)时的自动宽度,并在模糊(或鼠标离开)http://css-tricks.com/select-cuts-off-options-in-ie-fix/ 时设置原始宽度。
【讨论】:
【参考方案11】:for (i=1;i<=5;i++)
idname = "Usert" + i;
document.getElementById(idname).style.width = "100%";
当宽度显示不正确时,我使用这种方式显示下拉列表。
它适用于 IE6、Firefox 和 Chrome。
【讨论】:
【参考方案12】:一个完整的 jQuery 插件可用,查看演示页面:http://powerkiki.github.com/ie_expand_select_width/
免责声明:我编写了那个东西,欢迎使用补丁
【讨论】:
这个在IE7上测试过吗?这就是我遇到问题的地方 - 在我的客户中,他们似乎只有从未升级过浏览器的人,所以他们使用的是 IE7,或者他们总是升级,所以他们使用的是 IE9(或 Firefox)。总是升级的人没有问题。 如主页所述,它仅适用于IE8。从未在 IE7 中测试过。抱歉回复晚了:-/【参考方案13】:为什么有人希望在下拉列表中出现鼠标悬停事件?下面是一种操作 IE8 的方法,以实现下拉列表的工作方式:
首先,让我们确保我们只在 IE8 中传递函数:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8)
//fix me code
然后,为了允许选择扩展到内容区域之外,让我们用正确的结构将下拉列表包装在 div 中(如果还没有的话),然后调用辅助函数:
var isIE8 = $.browser.version.substring(0, 2) === "8.";
if (isIE8)
$('select').wrap('<div class="wrapper" style="position:relative; display: inline-block; float: left;"></div>').css('position', 'absolute');
//helper function for fix
ddlFix();
现在进入事件。由于IE8无论出于何种原因在聚焦后都会引发一个事件,因此IE在尝试展开时会在渲染后关闭小部件。解决方法是绑定到 'focusin' 和 'focusout' 类,该类将根据最长的选项文本自动扩展。然后,为了确保恒定的最小宽度不会缩小到默认值,我们可以获取当前的选择列表宽度,并将其设置为 'onchange' 上的下拉列表最小宽度属性强>绑定:
function ddlFix()
var minWidth;
$('select')
.each(function ()
minWidth = $(this).width();
$(this).css('min-width', minWidth);
)
.bind('focusin', function ()
$(this).addClass('expand');
)
.change(function ()
$(this).css('width', minWidth);
)
.bind('focusout', function ()
$(this).removeClass('expand');
);
最后,确保在样式表中添加这个类:
select:focus, select.expand
width: auto;
【讨论】:
【参考方案14】:恐怕不是免费的 javascript,而且我的解决方案确实需要一个 js 库,但是,您只能使用您需要的那些文件,而不是全部使用它们,也许最适合那些已经在他们的项目中使用 YUI 的人或决定使用哪一个。看看:http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/
我的博文也讨论了其他解决方案,其中一个在 *** 上被引用回到这里,为什么我回去创建自己的 SELECT 元素是因为简单的原因,我不喜欢 mouseover 展开事件。也许这对其他人也有帮助!
【讨论】:
【参考方案15】:我改进了 jquery BalusC's 解决方案。也用于:Brad Robertson 的comment here。
只需将它放在 .js 中,使用宽类来实现所需的组合,不要伪造给它一个 Id。调用 onload 中的函数(或 documentReady 或其他)。 就这么简单:) 它将使用您为组合定义的宽度作为最小长度。
function fixIeCombos()
if ($.browser.msie && $.browser.version < 9)
var style = $('<style>select.expand width: auto; </style>');
$('html > head').append(style);
var defaultWidth = "200";
// get predefined combo's widths.
var widths = new Array();
$('select.wide').each(function()
var width = $(this).width();
if (!width)
width = defaultWidth;
widths[$(this).attr('id')] = width;
);
$('select.wide')
.bind('focus mouseover', function()
// We're going to do the expansion only if the resultant size is bigger
// than the original size of the combo.
// In order to find out the resultant size, we first clon the combo as
// a hidden element, add to the dom, and then test the width.
var originalWidth = widths[$(this).attr('id')];
var $selectClone = $(this).clone();
$selectClone.addClass('expand').hide();
$(this).after( $selectClone );
var expandedWidth = $selectClone.width()
$selectClone.remove();
if (expandedWidth > originalWidth)
$(this).addClass('expand').removeClass('clicked');
)
.bind('click', function()
$(this).toggleClass('clicked');
)
.bind('mouseout', function()
if (!$(this).hasClass('clicked'))
$(this).removeClass('expand');
)
.bind('blur', function()
$(this).removeClass('expand clicked');
)
【讨论】:
【参考方案16】:已在所有版本的 IE、Chrome、FF 和 Safari 中测试
// JavaScript 代码
<script type="text/javascript">
<!-- begin hiding
function expandSELECT(sel)
sel.style.width = '';
function contractSELECT(sel)
sel.style.width = '100px';
// end hiding -->
</script>
// Html code
<select name="sideeffect" id="sideeffect" style="width:100px;" onfocus="expandSELECT(this);" onblur="contractSELECT(this);" >
<option value="0" selected="selected" readonly="readonly">Select</option>
<option value="1" >Apple</option>
<option value="2" >Orange + Banana + Grapes</option>
【讨论】:
【参考方案17】:我对此还有另一个贡献。我不久前写了这篇文章,您可能会觉得有帮助:http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html
这是一个 jquery 插件,用于制作由隐藏选择元素支持的可样式化无序列表。
来源在github:https://github.com/tncbbthositg/GiantDropdown
您可以处理 UL 上的行为和样式,而 SELECT 则无法处理这些行为和样式。其他一切都应该是一样的,因为选择列表仍然存在,只是被隐藏了,但 UL 会将其用作后备数据存储(如果您愿意的话)。
【讨论】:
【参考方案18】:我希望它与我动态添加到页面的选择一起使用,所以经过大量实验后,我最终给出了我想要使用“固定宽度”类执行此操作的所有选择,然后添加了以下内容CSS:
table#System_table select.fixedwidth width: 10em;
table#System_table select.fixedwidth.clicked width: auto;
还有这段代码
<!--[if lt IE 9]>
<script type="text/javascript">
jQuery(document).ready(function()
jQuery(document).on(
'mouseenter': function(event)
jQuery(this).addClass('clicked');
,
'focusout change blur': function()
jQuery(this).removeClass('clicked');
, 'select.fixedwidth');
);
</script>
<![endif]-->
有几点需要注意:
尽管我的选择都在一个表中,但我不得不对jQuery(document).on
而不是jQuery('table#System_table').on
执行“on”操作
尽管 jQuery 文档说使用“mouseleave
”而不是“blur
”,但我发现在 IE7 中,当我将鼠标移到下拉列表中时,它会得到一个 @987654327 @ 事件,但不是 blur
。
【讨论】:
【参考方案19】:这是一个真正有效的解决方案。
它在 IE 中设置宽度,不会弄乱您的页面布局,也不会在您将鼠标悬停在选择选项上时关闭下拉菜单,就像本页上的其他一些解决方案一样。
但是,您将需要更改 margin-right
值和宽度值以匹配您选择字段的值。
您还可以将$('select')
替换为$('#Your_Select_ID_HERE')
以仅影响特定的选择字段。您还需要在主体 onload
上调用函数 fixIESelect()
或通过 jQuery 使用 DOM ready
,就像我在下面的代码中所做的那样:
//////////////////////////
// FIX IE SELECT INPUT //
/////////////////////////
window.fixIESelect_clickset = false;
function fixIESelect()
if ($.browser.msie)
$('select').mouseenter(function ()
$(this).css("width","auto");
$(this).css("margin-right","-100");
);
$('select').bind('click focus',function ()
window.fixIESelect_clickset = true;
);
$('select').mouseout(function ()
if(window.fixIESelect_clickset != true)
$(this).css("width","93px");
window.fixIESelect_clickset = false;
);
$('select').bind('blur change',function ()
$(this).css("width","93px");
);
/////////////
// ONLOAD //
////////////
$(document).ready(function()
fixIESelect();
);
【讨论】:
【参考方案20】:对于我的布局,我不想要一个 hack(不增加宽度,不点击自动然后回到原始状态)。它打破了我现有的布局。我只是希望它像其他浏览器一样正常工作。
我发现这和那个一模一样:-
http://www.jquerybyexample.net/2012/05/fix-for-ie-select-dropdown-with-fixed.html
【讨论】:
【参考方案21】:如果您在选择选项后不关心奇怪的视图(即选择跳转到新页面),则一种解决方法:
<!-- Limit width of the wrapping div instead of the select and use 'overflow: hidden' to hide the right part of it. -->
<div style='width: 145px; overflow: hidden; border-right: 1px solid #aaa;'>
<select onchange='jump();'>
<!-- '▼(▼)' produces a fake dropdown indicator -->
<option value=''>Jump to ... ▼</option>
<option value='1'>http://***.com/questions/682764/select-dropdown-with-fixed-width-cutting-off-content-in-ie</option>
...
</select>
</div>
【讨论】:
【参考方案22】:纯css解决方案:http://bavotasan.com/2011/style-select-box-using-only-css/
.styled-select select
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
.styled-select
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
【讨论】:
【参考方案23】:最佳解决方案:css + javascript
http://css-tricks.com/select-cuts-off-options-in-ie-fix/
var el;
$("select")
.each(function()
el = $(this);
el.data("origWidth", el.outerWidth()) // IE 8 can haz padding
)
.mouseenter(function()
$(this).css("width", "auto");
)
.bind("blur change", function()
el = $(this);
el.css("width", el.data("origWidth"));
);
【讨论】:
以上是关于选择固定宽度的下拉菜单,在 IE 中截断内容的主要内容,如果未能解决你的问题,请参考以下文章