[SOLVED] KO Sortable: <ul> is not tall enough to drop into

KO Sortable: <ul> is not tall enough to drop into

HTML excerpt:

<div style="height: 80%;" data-bind="sortable: { data: $data.data.sections, connectClass: 'sectionDrop' }">
    <section class="section">
        <div data-bind="text: 'New Section'"></div>
        <ul class="connected" data-bind="sortable: { data: fieldsCol1, connectClass: 'fieldDrop' }">
            <li>New Field</li>
        </ul>
        <ul class="connected" data-bind="sortable: { data: fieldsCol2, connectClass: 'fieldDrop' }">
            <li>New Field</li>
        </ul>
    </section>
</div>

Basically, the user can drag & drop sections into the div, and then drag & drop li's into each ul within the section.

I can d&d the sections but not the li's. Reason being, the ul is not tall enough to be visible. If I set a fixed height for it then obviously it won't expand dynamically.

I'm sure this is extremely easy, but I'm just stuck here. Thanks!

Solution

Instead of the height you need to set the min-height property to some value.

With using the min-height your ul will be at least that high but they will expand if the content "grows" inside them.

So you probably need to change your connected class to something like this:

.connected {
   min-height: 20px;
}