Неправильное выравнивание asp:BulletedList <ul> при опустошении

Question

У меня есть два asp:BulletedList в div "style=display:table". Идея состоит в том, что один будет содержать asp:ListItems, которые пользователь может перетаскивать между ними для создания другого списка выбранных элементов.

Это код

<div style="width:90%; display:table; border:1px solid green">
    <div style="width:100%; display:table-row">
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blAvailableDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="red">
                <asp:ListItem Text="AvailableLI1">
                </asp:ListItem>
                <asp:ListItem Text="AvailableLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
        <div style="width:30%; display:table-cell; text-align:center">
            <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" /><br /><br />
            <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" />
        </div>
        <div style="width:35%; display:table-cell; border:1px solid gray">
            <asp:BulletedList runat="server" ID="blSelectedDocuments" Height="150px" BorderStyle="Solid" BorderWidth="1px" BorderColor="Gray">
                <asp:ListItem Text="SelectedLI1">
                </asp:ListItem>
                <asp:ListItem Text="SelectedLI2">
                </asp:ListItem>
            </asp:BulletedList>
        </div>
    </div>
</div>

Просто верно? здесь также есть этот JQuery, который позволяет переупорядочивать в каждом списке и перетаскивать между ними.

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").disableSelection();

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").sortable();
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").disableSelection();
    });

    $(function ()
    {
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blAvailableDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });

        $("#ctl00_PlaceHolderMain_blSelectedDocuments").draggable({
            drag: function (event, ui)
            {
                if (ui.draggable[0].hasAttribute("ID"))
                {
                    return;
                }
            }
        });
        $("#ctl00_PlaceHolderMain_blSelectedDocuments").droppable({
            drop: function (event, ui)
            {
                var source = ui.draggable[0].parentElement.id;
                var target = event.target.id;

                if (source != target)
                {
                    Move(ui.draggable[0], source, target);
                }
            }
        });
    });

    function Move(element, from, to)
    {
        var fromBL = document.getElementById(from);
        var toBL = document.getElementById(to);
        var newLI = document.createElement("li");
        newLI.innerHTML = element.innerHTML;
        fromBL.removeChild(element);
        toBL.appendChild(newLI);
    }

Условие того, имеет ли элемент идентификатор, состоит в том, чтобы остановить перетаскивание самого списка, я думаю, что это ошибки, что делает то, что мне нужно, но, к вашему сведению, проблема, с которой я столкнулся, возникает без этого.

(Не могу опубликовать фото здесь еще....... по причине)

https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/946310_10151467867553519_1667792056_n.jpg

Перетаскивание работает отлично, кроме... Когда я перетаскиваю, чтобы не осталось ни одного ListItems ни в одном из BulletedLists, это происходит.

https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-prn1/945900_10151467867548519_1597804249_n.jpg

Любые идеи, мучы, грации и данки за любую помощь.

Answer 1

Яростно раздражает, насколько простым был ответ, и тем более, что мне никто не сказал.

Вместо отображения: таблица / строка / ячейка я использовал float:left, float:right и затем margin:auto для центра

    <div style="width:35%; border:1px solid gray; float:left">
        <asp:BulletedList runat="server" ID="blAvailableDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:35%; border:1px solid gray; float:right">
        <asp:BulletedList runat="server" ID="blSelectedDocuments" RenderWhenDataEmpty="true" Height="150px">
        </asp:BulletedList>
    </div>
    <div style="width:30%; text-align:center; margin:auto">
        <asp:Button runat="server" Text=">>" ID="btnAddAll" OnClientClick="AddAll(); return false" UseSubmitBehavior="false" /><br /><br />
        <asp:Button runat="server" Text="<<" ID="btnRemoveAll" OnClientClick="RemoveAll(); return false" UseSubmitBehavior="false" />
    </div>

Три дня, которые заняли у меня.... ТРИ ДНЯ!!!