diff options
Diffstat (limited to 'resources/src')
| -rw-r--r-- | resources/src/jquery/jquery.suggestions.js | 16 |
1 files changed, 14 insertions, 2 deletions
diff --git a/resources/src/jquery/jquery.suggestions.js b/resources/src/jquery/jquery.suggestions.js index a20a948d8214..7a32076ec3cb 100644 --- a/resources/src/jquery/jquery.suggestions.js +++ b/resources/src/jquery/jquery.suggestions.js @@ -267,10 +267,22 @@ $.suggestions = { } // Widen results box if needed (new width is only calculated here, applied later). - // We need this awful hack to calculate the actual pre-ellipsis width. + + // The monstrosity below accomplishes two things: + // * Wraps the text contents in a DOM element, so that we can know its width. There is + // no way to directly access the width of a text node, and we can't use the parent + // node width as it has text-overflow: ellipsis; and overflow: hidden; applied to + // it, which trims it to a smaller width. + // * Temporarily applies position: absolute; to the wrapper to pull it out of normal + // document flow. Otherwise the CSS text-overflow: ellipsis; and overflow: hidden; + // rules would cause some browsers (at least all versions of IE from 6 to 11) to + // still report the "trimmed" width. This should not be done in regular CSS + // stylesheets as we don't want this rule to apply to other <span> elements, like + // the ones generated by jquery.highlightText. $spanForWidth = $result.wrapInner( '<span>' ).children(); - childrenWidth = $spanForWidth.outerWidth(); + childrenWidth = $spanForWidth.css( 'position', 'absolute' ).outerWidth(); $spanForWidth.contents().unwrap(); + if ( childrenWidth > $result.width() && childrenWidth > expWidth ) { // factor in any padding, margin, or border space on the parent expWidth = childrenWidth + ( context.data.$container.width() - $result.width() ); |