From 5a9350483313cd7ade79a725ab3e71c86b2c0f21 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Tue, 23 Dec 2014 21:50:03 +0100 Subject: [PATCH] mediawiki.ui: checkbox: Correct alignment of long labels MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit 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 --- resources/src/mediawiki.ui/components/checkbox.less | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/resources/src/mediawiki.ui/components/checkbox.less b/resources/src/mediawiki.ui/components/checkbox.less index 089504a399..4829f5f6b5 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; -- 2.20.1