Page MenuHomePhabricator

IE: Additional 'x' on Advanced search on 'px'
Closed, ResolvedPublic1 Estimated Story Points


On IE all fields of Advanced Search have a small x to delete the content of the field when the field has the focus. For the file height/width this is printed on top of the 'px' of the field.

ie_bug1.jpg (140×620 px, 7 KB)

Browser: Internet Explorer 11

This should be solvable with a css rule specific for the internet explorer ("ms-clear") -
This can be tested on sourcelabs, where different browsers can be run, or with a vm for internet explorers

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Lea_WMDE triaged this task as Medium priority.Apr 25 2018, 12:09 PM
Lea_WMDE updated the task description. (Show Details)
Lea_WMDE set the point value for this task to 1.

Change 431571 had a related patch set uploaded (by Ebba Aniansson; owner: Ebba Aniansson):
[mediawiki/extensions/AdvancedSearch@master] Remove the additional x (ms-clear) from inout fields

Change 431571 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Remove the additional x (ms-clear) from input fields

thiemowmde moved this task from Unsorted to IE11 on the Browser-Support-Internet-Explorer board.
thiemowmde added subscribers: thiemowmde, matmarex.

Isn't this a bug in the OOUI TextInputWidget widget that should be reported and fixed upstream? I see OOUI already sets ::-ms-clear to display: none for all TextInputWidget with type="search" (see But it doesn't do this when a TextInputWidget does have the label option set to something. As the screenshot shows the right aligned label text conflicts with the right aligned clear button IE10+ display.

I believe the CSS/LESS that should be added upstream to OOUI should look like this:

/* Remove clear buttons (IE 10+, Edge 12+) that conflict with identically aligned labels */
.oo-ui-textInputWidget-labelPosition-after.oo-ui-labelElement ::-ms-clear {
  display: none;


  • The selector .oo-ui-textInputWidget-labelPosition-after does two things:
    • The rule needs to be restricted to TextInputWidgets.
    • The rule is not relevant when the label is "before", but only when it's "after" the input.
  • Unfortunately one of the two "before" and "after" classes is always set, even when there is no label. The additional .oo-ui-labelElement selector makes sure the rule is only applied to fields that have a label.

Change 431726 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[oojs/ui@master] Remove IE10+ clear button conflicting with right-aligned labels

Change 431726 merged by jenkins-bot:
[oojs/ui@master] TextInputWidget: Hide IE10+'s clear button when it conflicts with labels

Demo page test with IE11 (albeit tested through VM):

Clear button not shown and doesn't get in the way when there is a label position-after'ed in the way:
Screen Shot 2018-05-08 at 11.52.16.png (134×672 px, 27 KB)
Clear button shows as expected on focus when there's no label position-after'ed:
Screen Shot 2018-05-08 at 11.52.19.png (134×675 px, 28 KB)


Wonderful, thanks a lot for everything here, @Jdforrester-WMF! This means we can possibly get rid of the local override the moment the fix is released with a new OOUI version. @Lea_WMDE, do you want to track this in a separate ticket?

@thiemowmde @Lea_WMDE OOUI v0.27.0 with your patch was released yesterday, and I just merged the change in MediaWiki to use it (, so you can probably do that now.

Change 432142 had a related patch set uploaded (by Jforrester; owner: Jforrester):
[mediawiki/extensions/AdvancedSearch@master] Revert "Remove the additional x (ms-clear) from input fields"

@matmarex thanks for the info!

@thiemowmde can we remove the override in this ticket also? The description still holds valid to what we want. Or do you see a reason why we need a seperate ticket?

The patch is already there, and already linked to this ticket. If the FUN team can manually test and approve this patch, everything is done and we don't need an other ticket. :-)

Change 432142 merged by jenkins-bot:
[mediawiki/extensions/AdvancedSearch@master] Revert "Remove the additional x (ms-clear) from input fields"