Reputation: 147
I'm using two UL's and scrolling them horizontally using javascript, but they jump about 10-20 px when the list items are dragged between the lists. This happens in chrome, but not in firefox. Problem is, it's fixed in chrome when setting the UL Li's to float:left, but that breaks the whole thing in firefox (the list does not stay on one line). Help!
Here's the web page, please open in webkit/chrome and firefox
http://www.senseculture.com/timeline_new.html
The Code I'm using for the draggable is:
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".timeline_content"
}).disableSelection();
});
</script>
Upvotes: 0
Views: 174
Reputation: 3961
Seems like an issue where Chrome is treating default css properties differently than Firefox. You can pass an option to Selectable
to add a class to the placeholder
- that allows you to easily style that placeholder
:
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".timeline_content",
placeholder: "timeline-placeholder"
}).disableSelection();
});
The following style (although a bit weird) worked for me:
.timeline-placeholder {
display: inline !important;
padding: 0 99px;
width: 2px;
}
I generally dislike the need to use !important
/ limit its use, but default behavior of the placeholder
is to be set to display: block
which needed to be overriden.
edit: I found one solution to your problem, but not the cause - would be interested to see if anyone knows what property or combination of properties is causing that.
Upvotes: 1