Select dropdown with fixed width cutting off conte-第3页回答

The issue:

Some of the items in the select require more than the specified width of 145px in order to display fully.

Firefox behavior: clicking on the select reveals the dropdown elements list adjusted to the width of the longest element.

IE6 & IE7 behavior: clicking on the select reveals the dropdown elements list restricted to 145px width making it impossible to read the longer elements.

The current UI requires us to fit this dropdown in 145px and have it host items with longer descriptions.

Any advise on resolving the issue with IE?

The top element should remain 145px wide even when the list is expanded.

Thank you!

The 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;
}

Here's the select input code (there's no definition for the backend_dropbox style at this time)

<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>

Full html page in case you want to quickly test in a browser:

<!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>

标签： html css internet-explorer html-select

23条回答

来，给爷笑一个

2楼-- · 2019-01-03 02:47

Not javascript free, I am afraid too and my solution do require a js library, however, you can only use those files which you need rather than using them all, maybe best suited for those who are already using YUI for their projects or deciding which one to use. Have a look at: http://ciitronian.com/blog/programming/yui-button-mimicking-native-select-dropdown-avoid-width-problem/

My blog post also discusses other solutions as well, one is referenced back to here on stackoverflow, why I went back to create my own SELECT element is because of simple reason, I don't like mouseover expand events. Maybe if that helps anyone else too!

0人赞添加讨论(0) 举报

别忘想泡老子

3楼-- · 2019-01-03 02:48

Here is a little script that should help you out:

http://www.icant.co.uk/forreview/tamingselect/

0人赞添加讨论(0) 举报

神经病院院长

4楼-- · 2019-01-03 02:48

I found a pretty straightforward fix for this. In the <select> html element add these properties:

onmouseover="autoWidth(this)" 
onblur="resetWidth(this)"

So whenever user clicks on that the width will automatically expand, and user moves out of the select box, the width will be reset to original.

0人赞添加讨论(0) 举报

女痞

5楼-- · 2019-01-03 02:49

For a simple Javascript-free solution, adding a title-attribute to your <option>s holding the text might be enough, depending on your requirements.

<option value="242" title="Very long and extensively descriptive text">
  Very long and extensively descriptive text
</option>

This will show the cut-off text in a tool-tip fashion on hovering the <option>, regardless of the width of the <select>.

Works for IE7+.

0人赞添加讨论(0) 举报

Emotional °昔

6楼-- · 2019-01-03 02:51

for (i=1;i<=5;i++){
   idname = "Usert" + i;
   document.getElementById(idname).style.width = "100%";

}

I used this way to showed the drop down list when the width is not showed correctly.

It work for IE6, Firefox and Chrome.

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

7楼-- · 2019-01-03 02:51

A pure css solution : 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 #ffffd;
   border: 1px solid #ccc;
   }

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

0人赞添加讨论(0) 举报

Select dropdown with fixed width cutting off conte

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间