Bubble Editor: Position off-screen on top.

acole86

When working with tables that are near the top of the document and/or a large bubble editor, the bubble editor may extend off the top of the screen because it always attaches above the node being edited. I have added a small snippet of code and CSS to solve the problem by shifting the position of the bubble above or below the node based on the half-way point of the document.

dataTables.editor.js v1.4.2 circa line 1689:

var
    top = position.top,
    left = (position.left + position.right) / 2,
    width = liner.outerWidth(),
    visLeft = left - (width / 2),
    visRight = visLeft + width,
    docWidth = $(window).width(),
    docHeight = $(window).height(),
    padding = 15,
    wrapperTop,
    classes = this.classes.bubble;

// Position below node if top of node is above the halfway mark of the document height.
if( position.top < docHeight / 2 ) {
    wrapperTop = top + liner.outerHeight() + padding + $(nodes).outerHeight();
    // Move the pointer div and add a class to adjust the orientation and position.
    $( 'div.' + classes.pointer ).prependTo(liner).addClass('top');
} else {
    wrapperTop = top;
}

wrapper.css( {
    top: wrapperTop,
    left: left
} );

dataTables.editor.css:

div.DTE_Bubble div.DTE_Bubble_Triangle.top {
  right: 50%;
  border-bottom: none;
  border-left: none;
  border-top: 2px solid #444; 
  border-right: 2px solid #444;
}

It could be tweaked a bit, but something like this should solve the problem without too much more fuss. Would love to see this issue addressed in the next release: we heavily rely on large bubble editors for our application!

allan

Hi,

Thanks for this. i will certainly take a look at including this in the next release.

Allan

allan

Hi,

Sorry for the massive delay in replying back about this. I've just committed a change to Editor that will be included in 1.5.1 which is similar to this, but I've based it on the document, rather than the window. So it is still possible the bubble will be shown above the scrolling viewport if in the middle of the document, but if the bubble were to be displayed overlapping above the document, it will now be shown below the field. As such it will always be possible to fully view the bubble, even if a small scroll is required.

Regards,
Allan