The jQuery popup does not show at the desired position

Question

I have a text box and a hidden div which will be shown as a popup. I want when user click on the textbox, the hidden div popup will be displayed at the textbox's position. So, I use the code:

var p = $("#listCats");
var position = p.offset();
$('#category').css({"left" : position.left, "top" : position.top});

listCats: the id of the textbox

category: the id of the hidden div, and it is also the css

#category {
        width: 508px;
        min-height: 135px;
        padding: 0.4em;
        position: absolute;
        border: 2px solid rgb(124, 113, 113);
        background: #fff
}

However, the hidden div popup does not show as I expected, rather:

enter image description here

Was I doing something wrong?

Edited: The complete hidded div as follows:

<div id="category" style="display:none;">
        <s:iterator value="categoryMapList">
            <div class="cat_label_title parentCat" id="<s:property value="key.id" />">
                <s:property value="key.name" />
                <div class="subCat">
                    <s:iterator value="value" var="category">
                        <label >
                            <a  href="#" class="cat_label_item catItem" name="catItem:<s:property value="key.name" />, <s:property value="#category.name" />"
                                id="catItem:<s:property value="#category.id" />">
                                <s:property value="#category.name" />
                            </a>
                        </label>
                    </s:iterator>
                </div>
            </div>
        </s:iterator>
    </div>

I have updated the question with the complete hidden div, others just merely html open/close tags — ipkiss, Jan 22 '13 at 13:30

score 1 · Accepted Answer · edited May 23 '17 at 12:27

You might want to check to see if the category container is absolutely positioned inside another div that has relative positioning.

This would mean the top, left is relative to the parent.

So by taking the page offset of the parent, and then setting that to the child, you would push it away from the parent instead of under.

Check this out as well: https://stackoverflow.com/a/3202038/1060487

score 0 · Answer 2 · answered Jan 22 '13 at 13:18

0

jquery.css needs a string with px at the end. In your case:

$('#category').css({"left" : position.left + 'px', "top" : position.top + 'px'});

answered Jan 22 '13 at 13:18

daniatic

502
4
18

score 0 · Answer 3 · answered Jan 22 '13 at 14:33

HTML:

<input type="text" name="txt" id="listCats">

<div id="category"><p>Hello</p></div>

CSS:

#category {
  width: 508px;
  min-height: 135px;
  padding: 0.4em;
  position: absolute;
  border: 2px solid rgb(124, 113, 113);
  background: #fff;
  display: none;
}

jQuery:

var $inp = $("#listCats"),
$msg = $("#category"),
pos = $inp.offset();

$inp.bind("click", function () {
  $msg.css({
    "left": pos.left,
    "top": pos.top + $inp.height()
  }).show();
});

Working fiddle: http://jsfiddle.net/darshanags/MEgrp/12/

The jQuery popup does not show at the desired position

3 Answers3