Jquery / CSS: форсировать мою / at / позицию независимо от позиции прокрутки в браузере?

Question

Я попытался создать простое представление комментариев, используя css и jquery, где в конце каждой строки ссылка «ответ» должна показывать маленькое поле внизу, чтобы заполнить комментарии.Для этой цели я использую div, которые изначально скрыты и которые я затем показываю с помощью jquery и которые располагаются относительно ссылки, которая их вызывала.

Это работает нормально, если браузер находится в таком состоянии.scroll-position, чтобы вся форма была видна.Однако, если не хватает места, форма отображается в другом месте, где она подходит.Это даже верно, когда я использую position: относительный в css: Теперь, под кнопкой ответа будет достаточно свободного места для формы, но форма все равно будет отображаться сверху, а не под кнопкой, если ее нетдостаточно места.

Вот мой код:

CSS:

#mycomments_list .comment { margin-left: 50px; }
#mycomments_list .form {
display: none;
position: absolute;
background: #248;
padding: .5em 1em .5em 1em;
border-radius: .5em;
-moz-border-radius: .5em;
-webkit-border-radius: .5em;
box-shadow: #000 1px 1px 5px;
-moz-box-shadow: #000 1px 1px 5px;
-webkit-box-shadow: #000 1px 1px 5px;
white-space: nowrap;
}

Jquery:

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}

HTML (выдержка)

<div class="comment">
    <div id="1">

    mike --- This is the first comment.. -- 
    <a href="#" class="comment_click" id="1_1">Reply</a> 

    <div class="form" id="comment_form_1_1"> 
        .. form here
    </div>

    </div>

...
</div>

У меня было смутное ощущение, что такое поведение может быть преднамеренным, но тогда довольно странно, что позиция: родственник создаст необходимое пространство, но не заполнит его?

Есть ли какие-либо указатели на то, что я мог быбудет очень признателен за то, что вы пропустили или сделали что-то не так!

Спасибо, qz

Answer 1

Утилита позиционирования jQuery UI также имеет параметр столкновения.Попробуйте установить в свой код значение none:

function setCommentFormVisible(id) {
    var item = $("#comment_form_" + id);
    var connector = $(".comment_click#" + id);
    if (!(item.is(":visible"))) {
        item.show();
        item.css({left:0,top:0});
        item.position({
            my: "left top",
            at: "center bottom",
            of: connector,
            collision: 'none none' });
        connector.addClass("active");
    } else {
        item.hide();
        connector.removeClass("active");
    }
}