当页面变长（滚动条被激活）时，如何为对话框设置相对 Position？

Question

Have a web app which consists of a form and have it set up to launch a dialog box containing information next to the subject label text field. Everytime, someone fills out the form and clicks on submit, the form's message body (from the text area of the form) is displayed on top and the form is displayed underneath it. Before, I had it set up as fixed (x,y) for the dialog box to appear next to the subject label. But, now, when the page becomes longer, the dialog box doesn't appear next to my subject label text field. It is displayed a lot lower.

Here's the code to find the position:

// Finds the position and adds 40px to the left axis.
function findPosition(obj) {
    var curleft = curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        curleft += 42;
//      alert ('[' + curleft + ', ' + curtop + ']');
        return [curleft,curtop];
    }
}

Here's the code that calls this function to display a dialog box at a specific place:

function displayDialog() {
    var subjectLabel = document.getElementById("myform.subjectLabel");
     $("#myDialog").dialog({
         open: function(event, ui) {
             jQuery('.ui-dialog-titlebar-close')
                         .removeClass("ui-dialog-titlebar-close")
                         .html('<span padding-right = "16px;">Close</span>');
         },
         hide: true,
         draggable: false,
         position: findPosition(subjectLabel),
         closeOnEscape: false
     });
}

How can I set it so my findPosition() calculation doesn't miscalculate when the page is too long (when scroll bars are needed)?

Is there a way to set the relative positioning to always have the dialog appear 40px right of the subject label?

Thank you for taking the time to read this.

Answer 1

You can accomplish this simply with CSS. By setting your label's CSS to position: relative and placing a div with position: absolute inside of it, you can put the container anywhere you want relative to the label.

Note that if you're going to try to position a div relative to a table cell, you'll need to do some extra work. If the above doesn't work for you, let me know and I can dig up the full solution.

.mylabel {
    position: relative;
}
.mylabelfriend {
    display: none; /* if you don't want these 100% of the time */
    position: absolute;
    left: 40px;
    top: 0;
}