Menu
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?
790
Method 1: Append the option tag to the select box The option to be added is created like a normal HTML string. The select box is selected with the jQuery selector and this option is added with the append() method. The append() method inserts the specified content as the last child of the jQuery collection.
Syntax of jQuery Select Option$("selector option: selected"); The jQuery select option is used to display selected content in the option tag. text syntax is below: var variableValue = $("selector option: selected").
The remove() method removes the options, the end() takes the object back to the beginning of the script, and the append() method adds new options in the list.
Add options to a drop-down list using jQuery. JavaScript Code: var myOptions = { val1 : 'Blue', val2 : 'Orange' }; var mySelect = $('#myColors'); $. each(myOptions, function(val, text) { mySelect.
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.
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?
94
In IE the select box is by default the width of the widest item, and it's dropdown list is always the same width as the select box. In most other browsers the dropdown list can be wider than the select box, so they are not as eager to change the size of the select box.
If you specify a width for the select box, IE should follow that. You would have to specify a width wider than the widest item, otherwise they will be cropped in the dropdown list.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
