From 985dd44b669bbf685acab11f219015cae4045c47 Mon Sep 17 00:00:00 2001 From: Slavi Pantaleev 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 --- .../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; }