Sortable elements' size differs when dragging

Sortable elements' size differs when dragging


Hi all,
I have just started using jQuery sortables and have run into a problem
when working with sortable containers
whose size is larger than the element inside of them.
For instance If you have a list whose width is statically set, each
list item should use the same width. When dragging the items however
the elements appear to only extend to the size of whatever is inside
of the list item.
Here is an example of what I mean:
== CODE BEGIN ==
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
    <title>jQuery > Sortables Experiment</title>
    <style type='text/css'>
        #myList {width: 350px; border: 1px solid black;}
        li {background-color: blue;}
    </style>
    <script src="/lib/jquery/ui/jquery-1.2.4b.js" type="text/
javascript"></script>
    <script src="/lib/jquery/ui/ui.core.js" type="text/javascript"></
script>
    <script src="/lib/jquery/ui/ui.sortable.js" type="text/javascript"></
script>
</head>
<body>

jQuery > Sortables Experiment


    <ul id="myList" class="ui-sortable" style="position: relative;">
        <li>
            <div class="header">
                Header 1
            </div>
            <div class="content">
                Content 1
            </div>
        </li>
        <li>
            <div class="header">
                Header 2
            </div>
            <div class="content">
                Content 2
            </div>
        </li>
    </ul>
<script type="text/javascript">
$(window).bind("load",function(){
    $("#myList").sortable();
});
</script>
</body>
</html>
== CODE END ==
Normally the list items extend to 350px. When being dragged however
they are much smaller (just large enough
to hold their content).
Any ideas?
Thanks,
Keith