Make dropdowns with long options degrade more gracefully

spantaleev · spantaleev · commit 985dd44b669b · 2018-02-24T09:54:45.000+02:00
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 &lt;slavi@devture.com&gt;
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
@@ -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;
 }

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,12 @@ limitations under the License.`
`56`	`56`	`left: 10px;`
`57`	`57`	`}`
`58`	`58`
	`59`	`+.mx_Dropdown_input > .mx_Dropdown_option {`
	`60`	`+ overflow: hidden;`
	`61`	`+ text-overflow: ellipsis;`
	`62`	`+ white-space: nowrap;`
	`63`	`+}`
	`64`	`+`
`59`	`65`	`.mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {`
`60`	`66`	`padding-left: 25px;`
`61`	`67`	`}`
`@@ -104,6 +110,11 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {`
`104`	`110`	`overflow-y: auto;`
`105`	`111`	`}`
`106`	`112`
	`113`	`+.mx_Dropdown_menu .mx_Dropdown_option {`
	`114`	`+ height: auto;`
	`115`	`+ min-height: 35px;`
	`116`	`+}`
	`117`	`+`
`107`	`118`	`.mx_Dropdown_menu .mx_Dropdown_option_highlight {`
`108`	`119`	`background-color: $focus-bg-color;`
`109`	`120`	`}`