BayardRock / WebIntellisense

JavaScript and CSS library for intellisense user interface. Complete with bindings for a textarea, ACE editor, and CodeMirror.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Get popup at wrong position

DraTeots opened this issue · comments

Hi!
I'm using bootstrap 3 and the input is using float style:

Something like this

<label class="small" for="queryInput">Search query</label>
                             <div class="input-group ">
                                 <input class="form-control  input-sm" rows="1" id="queryInput" name="q" placeholder="event_count>10000 ..." value="{{ search_query|safe }}"  />
                                 <div class="input-group-btn">
                                     <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                                     <ul class="dropdown-menu">
                                         <li><p class="text-center"><strong>Standard search aliases:</strong></p></li>
                                         <li class="divider"></li>
                                         <li><a class="q-alias-selector" data-alias-name="@is_physics" href="#">Is physics [@is_physics]</a></li>
                                         <li><a class="q-alias-selector" data-alias-name="@calib" href="#">Is calibration [@is_calib]</a></li>
                                         <li><a class="q-alias-selector" data-alias-name="@3607"  href="#">Is cosmic [@is_cosmic]</a></li>
                                     </ul>
                                     <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#slectConditionTypeModal">
                                        <span class="glyphicon glyphicon-list"></span>
                                     </button>
                                     <button id="qGoBtn" type="submit" class="btn btn-primary btn-sm">
                                         <span class="glyphicon glyphicon-search"  aria-hidden="true"></span>
                                     </button>
                                 </div>
                             </div>

In this case in webintellisense-textbox.js in funcions like:

    // when the visiblity has changed for the methods, set the position of the methods UI
    meths.onVisibleChanged(function (v)
    {
        if (v)
        {
            var coords = getCaretCoordinates(editor, getCaretOffset());
            var x = coords.left + editor.offsetLeft;
            var y = coords.top + editor.offsetTop + 15;
            meths.setPosition(x, y);
        }
    });

the offtopLeft and offsetTop values are set relative to a parent. And the popup appears somewhere in the upper corner of the document.

As a workaround we used jquery.offset()

var jq_editor = $(editor);
var x = coords.left + jq_editor.offset().left;
var y = coords.top + jq_editor.offset().top + 15;

Then it works. But I'm not sure it is a best solution.