Select Cutoff Fix

 

Select Cutoff Fix

Busted in IE 7/8

Fixed

 

<!DOCTYPE html>
<html>

<head>
<meta charset=’UTF-8′>

<title>Select Cutoff Fix</title>

<style>
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #444; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap {
width: 150px;
margin: 0 auto;
background: white;
padding: 200px 0;
}

select {
width: 150px;
padding: 5px;
margin: 0 0 20px 0;
}

h1, h2 {
font: bold 16px Sans-Serif;
margin: 0 0 10px 0;
padding: 0 10px;
}

h1 {
font-size: 30px;
margin: 0 0 20px 0;
color: red;
}
</style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<!–[if lt IE 9]>
<script>
$(function() {

var el;

$(“select.fix-me”)
.each(function() {
el = $(this);
el.data(“origWidth”, el.outerWidth()) // IE 8 will take padding on selects
})
.mouseenter(function(){
$(this).css(“width”, “auto”);
})
.bind(“blur change”, function(){
el = $(this);
el.css(“width”, el.data(“origWidth”));
});

});
</script>
<![endif]–>
</head>

<body>

<div id=”page-wrap”>

<h1>Select Cutoff Fix</h1>

<h2>Busted in IE 7/8</h2>

<select>
<option value=”This is one of the longest line option 1″>This is one of the longest line option 1</option>
<option value=”This is one of the longest line option 2″>This is one of the longest line option 2</option>
<option value=”This is one of the longest line option 3″>This is one of the longest line option 3</option>

</select>

<h2>Fixed</h2>

<select>
<option value=”This is one of the longest line option 1″>This is one of the longest line option 1</option>
<option value=”This is one of the longest line option 2″>This is one of the longest line option 2</option>
<option value=”This is one of the longest line option 3″>This is one of the longest line option 3</option>

</select>

</div>

</body>

</html>

<code>

<style>
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; background: #444; }

article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }

#page-wrap {
width: 150px;
margin: 0 auto;
background: white;
padding: 200px 0;
}

select {
width: 150px;
padding: 5px;
margin: 0 0 20px 0;
}

h1, h2 {
font: bold 16px Sans-Serif;
margin: 0 0 10px 0;
padding: 0 10px;
}

h1 {
font-size: 30px;
margin: 0 0 20px 0;
color: red;
}
</style>

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”></script>
<!–[if lt IE 9]>
<script>
$(function() {

var el;

$(“select.fix-me”)
.each(function() {
el = $(this);
el.data(“origWidth”, el.outerWidth()) // IE 8 will take padding on selects
})
.mouseenter(function(){
$(this).css(“width”, “auto”);
})
.bind(“blur change”, function(){
el = $(this);
el.css(“width”, el.data(“origWidth”));
});

});
</script>
<![endif]–>

<div id=”page-wrap”>

<h1>Select Cutoff Fix</h1>

<h2>Busted in IE 7/8</h2>

<select>
<option value=”This is one of the longest line option 1″>This is one of the longest line option 1</option>
<option value=”This is one of the longest line option 2″>This is one of the longest line option 2</option>
<option value=”This is one of the longest line option 3″>This is one of the longest line option 3</option>

</select>

<h2>Fixed</h2>

<select>
<option value=”This is one of the longest line option 1″>This is one of the longest line option 1</option>
<option value=”This is one of the longest line option 2″>This is one of the longest line option 2</option>
<option value=”This is one of the longest line option 3″>This is one of the longest line option 3</option>

</select>

</div>

</code>