Fix dropdown menu overflow

pull/2780/head
Chocobozzz 2020-05-20 11:58:03 +02:00
parent 3bf07dd8c2
commit e0433a5f8f
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 8 additions and 6 deletions

View File

@ -12,10 +12,10 @@
<my-feed [syndicationItems]="syndicationItems"></my-feed> <my-feed [syndicationItems]="syndicationItems"></my-feed>
<div ngbDropdown class="d-inline-block ml-4"> <div ngbDropdown class="d-inline-block ml-4">
<button class="btn btn-sm btn-outline-secondary" id="dropdownSortComments" ngbDropdownToggle i18n> <button class="btn btn-sm btn-outline-secondary" id="dropdown-sort-comments" ngbDropdownToggle i18n>
SORT BY SORT BY
</button> </button>
<div ngbDropdownMenu aria-labelledby="dropdownSortComments"> <div ngbDropdownMenu aria-labelledby="dropdown-sort-comments">
<button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button> <button (click)="handleSortChange('-createdAt')" ngbDropdownItem i18n>Most recent first (default)</button>
<button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button> <button (click)="handleSortChange('-totalReplies')" ngbDropdownItem i18n>Most replies first</button>
</div> </div>

View File

@ -33,7 +33,7 @@
} }
} }
#dropdownSortComments { #dropdown-sort-comments {
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
border: none; border: none;

View File

@ -37,6 +37,8 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
} }
.dropdown-menu { .dropdown-menu {
z-index: z(dropdown) + 1 !important;
border-radius: 3px; border-radius: 3px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-size: 15px; font-size: 15px;