Widget is cut off at end of editor

1

I’ve added a popup widget that I want to show when text is selected. The code for the widget looks like this:

#selection-popup {
  display: block;
  z-index: 1000;
}
<div id="selection-popup" cm-ignore-events="true" style="position: absolute; top: 26px; left: 81px;">
    <div class="btn-group">
        <button type="button" class="btn btn-primary">
            <span class="glyphicon glyphicon-comment"></span>
        </button>
        <button type="button" class="btn btn-primary"></button>
        <button type="button" class="btn btn-primary"></button>
    </div>
</div>

I’m using code like this to attach the widget to a point:

selectionPopup = document.getElementById('selection-popup');
c.addWidget({line: anchor.line, ch: anchor.ch}, selectionPopup);

When I select a line with plenty of space under it, the popup shows just fine, like in this screenshot:

06 AM
06 AM1642×578 14.8 KB

But then, when I select the last line, the popup is cut off:

15 AM
15 AM1636×612 14.1 KB

I assume this has something to do with the div overflowing out of the parent. Any advice on how to handle this?

2

addWidget will put the DOM node inside of the editor, which is apparently not what you are looking for. You’ll have to overlay it on the editor yourself then, using charCoords to find the proper position.

3

Rats, thats what I was concerned about. The problem with that, then, is
that when the window is resized, I have to re-calculate the coordinates.
Any advice on that?