From c1688d2be39d5d233b1ee173f84bde9dadc14958 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 4 Mar 2019 12:02:23 +0000 Subject: [PATCH 1/2] Limit Field label to size of input This avoids awkward wrapping if the label is longer than the input. This will show an ellipsis to suggest there's more text in the label than can be shown. --- res/css/views/elements/_Field.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index 8356515517..d0814afccd 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -89,6 +89,10 @@ limitations under the License. margin: 7px 8px; padding: 2px; pointer-events: none; // Allow clicks to fall through to the input + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: calc(100% - 18px); } .mx_Field input:focus + label, From 1336508a4e066da9868fe82cba30f34a5ef5643c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 5 Mar 2019 11:13:37 +0000 Subject: [PATCH 2/2] Add comment, fix bad math This adds a comment to explain the `max-width` and also fixes it actually use the right value. (I had grabbed the wrong part of `margin` the first time.) --- res/css/views/elements/_Field.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index d0814afccd..02f0e548fb 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -92,7 +92,7 @@ limitations under the License. overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - max-width: calc(100% - 18px); + max-width: calc(100% - 20px); // 100% of parent minus margin and padding } .mx_Field input:focus + label,