PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Make dropdowns with long options degrade more gracefully

Browse source 
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>
This commit is contained in:
Slavi Pantaleev 2018-02-24 09:54:45 +02:00
parent 3bf04095b1
commit 985dd44b66
1 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/skins/vector/css/matrix-react-sdk/views/elements/_Dropdown.scss
View file

@ -56,6 +56,12 @@ limitations under the License.
left: 10px; 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 { .mx_Dropdown.left_aligned .mx_Dropdown_input > .mx_Dropdown_option {
padding-left: 25px; padding-left: 25px;
} }
@ -104,6 +110,11 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
overflow-y: auto; overflow-y: auto;
} }
.mx_Dropdown_menu .mx_Dropdown_option {
height: auto;
min-height: 35px;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight { .mx_Dropdown_menu .mx_Dropdown_option_highlight {
background-color: $focus-bg-color; background-color: $focus-bg-color;
} }