jenkins-bot has submitted this change and it was merged.
Change subject: jquery.suggestions: Handle CSS ellipsis better for IE
......................................................................
jquery.suggestions: Handle CSS ellipsis better for IE
IE is not impressed by our puny hacks and still reports the width
"in context of" the position in the document, limited by the width
of ancestor elements.
Let's temporarily apply position: absolute; to the involved elements.
This pulls them out of normal document flow and lets us figure out the
real width at last.
Also wrote a proper comment on why we need this stuff.
Verified that this fixes:
* IE 8
* IE 11
Verified that it doesn't break:
* Firefox 3.6
* Firefox 29
* Opera 12
* Opera 22
It *does not* fix IE 6. I don't think that investigating why is a good
use of my time, so I didn't. I84fbae5a made the functionality usable
on IE 6, which feels good enough for me.
Bug: 65224
Change-Id: I4a7357543ca244585ade2061b92f5a6d1e439278
---
M resources/src/jquery/jquery.suggestions.js
1 file changed, 14 insertions(+), 2 deletions(-)
Approvals:
MarkAHershberger: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/src/jquery/jquery.suggestions.js
b/resources/src/jquery/jquery.suggestions.js
index a20a948..7a32076 100644
--- a/resources/src/jquery/jquery.suggestions.js
+++ b/resources/src/jquery/jquery.suggestions.js
@@ -267,10 +267,22 @@
}
// 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() );
--
To view, visit https://gerrit.wikimedia.org/r/135309
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I4a7357543ca244585ade2061b92f5a6d1e439278
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Cmcmahon <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: MarkAHershberger <[email protected]>
Gerrit-Reviewer: Mglaser <[email protected]>
Gerrit-Reviewer: TheDJ <[email protected]>
Gerrit-Reviewer: Thiemo Mättig (WMDE) <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
