In this small, but full example, I am trying to recreate a dual list box UI component. I simply wish to be able to move items from one box to another. (Would be nice if I could add sorting, but one hurdle at a time I think!)
I am getting a problem with this code in IE7 (FF, Chrome, Opera all seem to work fine). Whenever I move items from one list to another, the select box resizes (shrinks) each iteration. I’m not really sure where I am going wrong here, can anyone shed some insight?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dual List Testing</title>
<link type="text/css" href="css/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript">
$(function(){
//hover states on the static widgets
$('.dual-box > .button-panel > .button').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
// Hack the buttons of the dual-list to the centre (couldn't figure out a css solution)
$(function(){
$('#dualBox1 .button-panel').css("padding-top",($('.button-panel').height()-(34*4))/2); // v-centre
$('#dualBox1 .button').css("margin-left", ($('.button-panel').width()-34)/2); // h-centre
});
$(function(){
$('#dualBox1 .add').click(function () {
$('#dualBox1 .list-box:first select option:selected').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .remove').click(function () {
$('#dualBox1 .list-box:last select option:selected').appendTo('#dualBox1 .list-box:first select');
});
$('#dualBox1 .addall').click(function () {
$('#dualBox1 .list-box:first select option').appendTo('#dualBox1 .list-box:last select');
});
$('#dualBox1 .removeall').click(function () {
$('#dualBox1 .list-box:last select option').appendTo('#dualBox1 .list-box:first select');
});
});
</script>
<style type="text/css">
.dual-box
{
width: 500px;
height: 200px;
}
.dual-box > .list-box
{
width: 45%;
height: 100%;
background-color:#f00;
float: left;
}
.dual-box > .list-box > select
{
height: 100%;
width: 100%;
}
.dual-box > .button-panel
{
width: 10%;
height: 100%;
float: left;
}
.dual-box > .button-panel > .button
{
width:auto;
margin-bottom: 2px;
margin-left: auto;
margin-right: auto;
padding: 8px 0;
cursor: pointer;
float: left;
}
.dual-box > .button-panel > .button > span.ui-icon
{
float: left;
margin: 0 8px;
}
</style>
</head>
<body>
<div id="dualBox1" class="dual-box">
<div class="list-box">
<select multiple="multiple">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>
</div>
<div class="button-panel">
<div class="button add ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-e"></span>
</div>
<div class="button addall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-e"></span>
</div>
<div class="button removeall ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthickstop-1-w"></span>
</div>
<div class="button remove ui-state-default ui-corner-all">
<span class="ui-icon ui-icon-arrowthick-1-w"></span>
</div>
</div>
<div class="list-box">
<select multiple="multiple">
<option value="5">Test 5</option>
</select>
</div>
</div>
</body>
</html>
Thanks,
Update: I’ve been trying to look at this from all angles. I wondered if my JS was to blame, but looking at this through firefox seems to rule that out. Have I ran into a browser bug here?
Update 2: Okay, I’ve tracked this to be IE not liking percentage sizes to be set on the select element (although it picks this value up fine origionally, it breaks after you manipulate the element somehow). Executing the following 2 lines of jQuery seems to resolve the issue:
$('.dual-box > .list-box > select').height($('.dual-box').height());
$('.dual-box > .list-box > select').width(($('.dual-box').width()/100)*45);
I was kinda hoping for this not to become a hack on top of a hack, but unfortunately it seems to of. Does anyone have a clean way of resolving this issue?
I’ve decided to answer my own question, at least until someone provides a “better” solution. The solution is my second update, where I “hack” the position of elements with repositioning by javascript.