fix(css): Support arbitrary widths on dropdown
Fix for #750 (closed)
Truncate text with ellipsis and prevent caret from shrinking when dropdowns have a set width. Icons buttons now have a set min-width
so they don't shrink until they can't be seen.
Changes
Caret is shifted right
Carets is moved right by applying mr-auto
(margin right: auto;
) to the text.
before | after |
---|---|
Note: Using ml-auto
on the caret was not a good solution because it already defines has a margin-left
for spacing/layout.
text
is truncated
Dropdown before | after |
---|---|
Icons (caret) in buttons have a min-width
In dropdowns and buttons, icons (including the dropdown caret) now have a set min-width so they don't shrink when space is small:
before (120px) | after (160px) |
---|---|
Note: buttons are also changed, I think this is an improvement over the current state, but possibly buttons' text should be truncated as well. If this change is not desirable, the min-width can be set exclusively on the dropdown caret.
before | after |
---|---|