Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Prevent menu content from wrapping by default. Fixes #56. #102

Open
JanMiksovsky wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Prevent menu content from wrapping by default. Fixes #56. #102

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2899efa
Prevent menu content from wrapping by default to avoid re-wrapping du…
Aug 25, 2016
3c992b6
Drop use of `id` on dropdown wrapper; it didn't end up being necessary.
Aug 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions paper-menu-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,11 @@
@apply(--paper-menu-button-content);
}

.dropdown-content ::content > * {
/* Ensure items are full width so they don't wrap during animation. */
white-space: nowrap;
Copy link
Contributor

@cdata cdata Sep 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps it makes aesthetic sense to also truncate with ellipsis?

Copy link
Author

@JanMiksovsky JanMiksovsky Sep 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd recommend against doing that.

The menu is only animated for a short time, not long enough to read the text of the long menu items. By the time someone can recognize that an ellipsis indicates that some of the menu item text is currently hidden, the complete menu item text will be shown. During that interval, showing ellipsis briefly would just constitute another source of flicker, when it's the intent of this PR to reduce flicker during the animation.

Moreover, ellipses are conventionally used at the ends of menu items with a specific semantic intent: to signal that a menu item will open a dialog. Applying ellipses automatically to arbitrary menu items could lead to confusion.

}

:host([vertical-align="top"]) .dropdown-content {
margin-bottom: 20px;
margin-top: -10px;
Expand Down