Sortable, ol, placeholder and list-style: none

Hi,

I'm using sortable with an ol element. Everything works fine, except when I use "list-style: decimal;" on my list.

Some picture of what happen :

Picture 1 shows the initial list, Picture 2 and Picture 3 show what happen when I drag a li element in the list. In Picture 2 the list css property "list-style" is set to "decimal", and in Picture 3 is set to "none".

In Picture 3 the placeholder element keep the size of the dragging element, whereas in Picture 2 the placeholder height is constant : it's the height of the number next to it.

How can I have both : the order in the list (with "list-style: decimal") and the placeholder element with the moving element height ?
(I can't set a default heigh value for the placeholder class because every li have a different size)

Here the html code :

<ol class="modif-classement">
 <li style="background:aqua;height: 100px;">Plop</li>
 <li style="background:purple;height: 110px;">Plop2</li>
 <li style="background:teal;height: 200px;">Plop3</li>
 <li style="background:olive;height: 50px;">Plop4</li>

 <li style="background:green;height: 100px;">Plop5</li>
 <li style="background:blue;height: 120px;">Plop6</li>
</ol>

<script type="text/javascript">
$('document').ready(function() {
 $('.modif-classement').sortable({placeholder : 'place-reserve', 
                                          forcePlaceholderSize: true});
});
</script>

And the css

.modif-classement {
    margin: 10px 0 20px 0;
    list-style: decimal;
}
.modif-classement li {
    margin-top: 15px;
    cursor: move;
}
.place-reserve {
    border: 1px dashed orange;
    background: #fcf6df;
}

Thanks for your help

Topic Participants
vichenze

Sortable, ol, placeholder and list-style: none

Sortable, ol, placeholder and list-style: none

Topic Participants

vichenze