Prtksxna has submitted this change and it was merged.
Change subject: mediawiki.ui: checkbox: Correct alignment of long labels
......................................................................
mediawiki.ui: checkbox: Correct alignment of long labels
Use display: table-cell; to display the checkbox and the label
side-by-side. I am honestly surprised that this works here. Not sure
if it's a good idea to use… although we successfully did it for
OOjs UI in 2498265b, but we have more control over everything there.
Bug: T85241
Change-Id: I381d05360ad3e7ab153f56772fffb650dab5cda9
---
M resources/src/mediawiki.ui/components/checkbox.less
1 file changed, 10 insertions(+), 1 deletion(-)
Approvals:
Prtksxna: Looks good to me, approved
diff --git a/resources/src/mediawiki.ui/components/checkbox.less
b/resources/src/mediawiki.ui/components/checkbox.less
index 089504a..4829f5f 100644
--- a/resources/src/mediawiki.ui/components/checkbox.less
+++ b/resources/src/mediawiki.ui/components/checkbox.less
@@ -42,7 +42,7 @@
.client-js .mw-ui-checkbox:not(#noop) {
// Position relatively so we can make use of absolute pseudo elements
position: relative;
- line-height: @checkboxSize;
+ display: table;
* {
// reset font sizes (see bug 72727)
@@ -61,6 +61,11 @@
max-width: none;
margin: 0;
margin-right: 0.4em;
+ display: table-cell;
+
+ & + label {
+ display: table-cell;
+ }
// the pseudo before element of the label after the checkbox
now looks like a checkbox
& + label::before {
@@ -73,8 +78,12 @@
border-radius: @borderRadius;
width: @checkboxSize;
height: @checkboxSize;
+ line-height: @checkboxSize;
background-color: #fff;
border: 1px solid @colorGray7;
+ // align the checkbox to middle of the text
+ top: 50%;
+ margin-top: -1em;
.background-image-svg('images/checked.svg',
'images/checked.png');
.background-size( @checkboxSize - 0.2em, @checkboxSize
- 0.2em );
background-repeat: no-repeat;
--
To view, visit https://gerrit.wikimedia.org/r/181674
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I381d05360ad3e7ab153f56772fffb650dab5cda9
Gerrit-PatchSet: 4
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Isarra <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Nikerabbit <[email protected]>
Gerrit-Reviewer: Prtksxna <[email protected]>
Gerrit-Reviewer: Trevor Parscal <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
