From 985dd44b669bbf685acab11f219015cae4045c47 Mon Sep 17 00:00:00 2001
From: Slavi Pantaleev <slavi@devture.com>
Date: Sat, 24 Feb 2018 09:54:45 +0200
Subject: [PATCH] Make dropdowns with long options degrade more gracefully
If not enough space was dedicated to a dropdown,
it would previously make option text overlap.
With this patch, each option can potentially span
multiple lines. This is weird, but it's a better
degradation than making option text overlap.
Signed-off-by: Slavi Pantaleev <slavi@devture.com>
---
.../matrix-react-sdk/views/elements/_Dropdown.scss | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
index 2ddbb36c..69dd1703 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
@@ -56,6 +56,12 @@ limitations under the License.
left: 10px;
}
+.mx_Dropdown_input > .mx_Dropdown_option {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
padding-left: 25px;
}
@@ -104,6 +110,11 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
overflow-y: auto;
}
+.mx_Dropdown_menu .mx_Dropdown_option {
+ height: auto;
+ min-height: 35px;
+}
+
.mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: $focus-bg-color;
}