Trying to combine Sortable Demo examples for Display as Grid and Connected Lists Through Tabs
Hi all.
I am trying to combine two of the Sortable Demo examples. The links are below.
I am able to take the code from the Connected Through Lists and get it to work locally fine.
However, when I try and add the Float attirbute to the style like the Display Grid example says, it doesn't fully work. It does display the items as a Grid, but the issue is the div for the tab doesn't autosize to account for the list of items like it does in the Connect Through Tabs without the Float added.
I attached two images to show what I mean.
In the Lists Through Tabs version I have a style of:
#sortable1
li
,
#sortable2
li
{
margin
:
0
5px
5px
5px
;
padding
:
5px
;
font-size
:
1.2em
;
width
:
120px
; }
And for the Display Grid version I changed it to:
#sortable1 li, #sortable2 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; float: left; width: 80px; height: 10px; text-align: center;}
Any help would be greatly appreciated. I am sure it is something stupid I don't understand like maybe Float doesn't interact with the divs somehow and it has to be done another way.
Thanks,
Dan