| • MichaelSchoenitzer_WMDE | |
| Apr 3 2018, 11:28 AM |
| F18083847: Screen Shot 2018-05-08 at 11.52.19.png | |
| May 8 2018, 6:56 PM |
| F18083846: Screen Shot 2018-05-08 at 11.52.16.png | |
| May 8 2018, 6:56 PM |
| F16628488: ie_bug1.jpg | |
| Apr 3 2018, 11:28 AM |
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.
Browser: Internet Explorer 11
Notes
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
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
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 https://github.com/wikimedia/oojs-ui/blob/master/src/styles/widgets/TextInputWidget.less#L42). 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; }
Reasoning:
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: |
 |
| Clear button shows as expected on focus when there's no label position-after'ed: |
 |
Success.
Wonderful, thanks a lot for everything here, @Jdforrester-WMF! This means we can possibly get rid of the local override https://gerrit.wikimedia.org/r/431571 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 (https://gerrit.wikimedia.org/r/#/c/432028/), 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 https://gerrit.wikimedia.org/r/432142 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"