Merge "jquery.suggestions: Handle CSS ellipsis better for IE"

diff --git a/resources/src/jquery/jquery.suggestions.js b/resources/src/jquery/jquery.suggestions.js
index a20a948..7a32076 100644 (file)
--- 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() );