Move overflow-y to gr-account-list internal list

The reply dialog set the max height of the gr-account-list component.
Because the autocomplete dropdown is positioned absolutely, it appeared
to not exist on the input as the account-list required more and more
scroll.

Applying a max-height and overflow-y to the list of account chips within
the account-list fixes the autocomplete dropdown placement.

Bug: Issue 7112
Change-Id: I5714f8f08c24d4ed2048b75dbc9ccf0e69b17774
This commit is contained in:
Kasper Nilsson
2017-09-11 14:07:46 -07:00
parent eae61e40c8
commit a1ca71d0e5
2 changed files with 8 additions and 3 deletions

View File

@@ -37,12 +37,15 @@ limitations under the License.
.pending-add { .pending-add {
font-style: italic; font-style: italic;
} }
.list {
@apply --account-list-style;
}
</style> </style>
<!-- <!--
NOTE(Issue 6419): Nest the inner dom-repeat template in a div rather than NOTE(Issue 6419): Nest the inner dom-repeat template in a div rather than
as a direct child of the dom-module's template. as a direct child of the dom-module's template.
--> -->
<div> <div class="list">
<template id="chips" is="dom-repeat" items="[[accounts]]" as="account"> <template id="chips" is="dom-repeat" items="[[accounts]]" as="account">
<gr-account-chip <gr-account-chip
account="[[account]]" account="[[account]]"

View File

@@ -76,8 +76,10 @@ limitations under the License.
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex: 1; flex: 1;
max-height: 12em; --account-list-style: {
overflow-y: auto; max-height: 12em;
overflow-y: auto;
}
} }
#reviewerConfirmationOverlay { #reviewerConfirmationOverlay {
padding: 1em; padding: 1em;