Problem with a sortable list
Hi All,
I need to have a list (ul, li) with input boxes in it , but in my case
the li is very hard to select/click on in order to sort it. You realy
have only 1px hight to click on. Is there anything I can adjust so I
can click on the whole li, but then without removing the input boxes
or changingthe layout? Tips and pointers of any kind are more then
welcome!!
Below is an example page which I created to test this...
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.7.0/jquery-ui.min.js"></script>
<style>
fieldset{
border: 0px;
}
fieldset ul{
list-style: none;
padding: 0;
margin: 0;
}
fieldset ul li{
overflow: hidden;
margin-top: -1px;
height: 1%;
border-top: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
vertical-align: top;
background: #ffffff;
width: 200px;
}
fieldset input{
color: #2c2c2c;
font-size: 12px;
background: none;
border: none;
padding: 8px 18px 6px 13px;
float: left;
width: 200px;
}
</style>
<script language="javascript">
$(document).ready(function(){
$('#list').sortable();
});
</script>
</head>
<body>
<fieldset>
<ul id="list">
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
<li><input type="text" value="" /></li>
</ul>
</fieldset>
</body>
</html>