# Widget is cut off at end of editor

**URL:** <https://discuss.codemirror.net/t/widget-is-cut-off-at-end-of-editor/1395>\
**Category:** Uncategorized\
**Created:** [October 23, 2017, 2:34pm UTC](https://discuss.codemirror.net/t/widget-is-cut-off-at-end-of-editor/1395 "2017-10-23T14:34:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![citizenken](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/b782af/32.png) [@citizenken](https://discuss.codemirror.net/u/citizenken)\
**Post date:** [October 23, 2017, 2:34pm UTC](https://discuss.codemirror.net/t/widget-is-cut-off-at-end-of-editor/1395/1 "2017-10-23T14:34:45Z")

</div>

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](https://discuss.codemirror.net/uploads/default/original/1X/343e4e01f3cd8e161e7ddb8ef40ba78509cce288.png)

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

 ![15 AM](https://discuss.codemirror.net/uploads/default/original/1X/bc2cd99d8a70c00bab3b712b8b099fa0d078786d.png)

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

---

<div class="post-metadata">

**Author:** ![marijn](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/marijn/32/136_2.png) [@marijn](https://discuss.codemirror.net/u/marijn)\
**Post date:** [October 23, 2017, 2:59pm UTC](https://discuss.codemirror.net/t/widget-is-cut-off-at-end-of-editor/1395/2 "2017-10-23T14:59:32Z")

</div>

`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.

---

<div class="post-metadata">

**Author:** ![citizenken](https://discuss.codemirror.net/letter_avatar_proxy/v4/letter/c/b782af/32.png) [@citizenken](https://discuss.codemirror.net/u/citizenken)\
**Post date:** [October 23, 2017, 3:11pm UTC](https://discuss.codemirror.net/t/widget-is-cut-off-at-end-of-editor/1395/3 "2017-10-23T15:11:24Z")

</div>

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?