Mini-request: Notificaties menu in hoogte beperken in `vh`

[Blue-eagle]

Omdat ik het knopje "Markeer alles als gelezen" erg handig vind wil ik deze ook makkelijk kunnen bereiken. Op dit moment ben ik op een 13" MacBook Pro op Tweakers.net aan het browsen. Door 2-maal in te zoomen (Cmd + plus-teken) in Chrome verdwijnt deze knop net buiten beeld.

Dit zou makkelijk opgelost kunnen worden door de CSS styling van het dropdown menu aan te passen. Zet de maximale hoogte van dit menu niet op een vaste pixelwaarde, maar op een relatieve view-height waarde.

Zie: https://css-tricks.com/fun-viewport-units/

Alternatief: deze knop in dit menu niet onderaan plaatsen maar bovenaan. De settings zouden dan naar onderen kunnen wat mij betreft aangezien ik deze niet veelvuldig wil aanklikken. Ik vermoed dat men over het algemeen vaker gebruik maakt van de "Markeer als gelezen" knop dan van de settings knop.

Ik zou dit erg fijn vinden

[The Executer]

Ik ben voor! Op mobiel komt de knop ook onderaan, wat soms lastig is met de lange lijst met notificaties, vooral als je er een aantal vlak achter elkaar ontvangt.

[rens-br]

@Blue-eagle wellicht een eenvoudigere workaround. De knop is ook te vinden op: https://tweakers.net/my.tnet/notifications/.

[crisp]

Blue-eagle schreef op donderdag 22 maart 2018 @ 10:51:
[...]
Dit zou makkelijk opgelost kunnen worden door de CSS styling van het dropdown menu aan te passen. Zet de maximale hoogte van dit menu niet op een vaste pixelwaarde, maar op een relatieve view-height waarde.

Zie: https://css-tricks.com/fun-viewport-units/

Een relatieve waarde heeft als nadeel dat we dan ook window-resizes moeten gaan afvangen in verband met de custom scrollbar

Je kan dit voor jezelf in ieder geval ook met custom CSS oplossen:

Cascading Stylesheet:

.menuHeaderPopup .scrollArea {
  max-height: 400px;
}

[Blue-eagle]

crisp schreef op donderdag 22 maart 2018 @ 11:10:
[...]

Een relatieve waarde heeft als nadeel dat we dan ook window-resizes moeten gaan afvangen in verband met de custom scrollbar

Je kan dit voor jezelf in ieder geval ook met custom CSS oplossen:

Cascading Stylesheet:

.menuHeaderPopup .scrollArea {
  max-height: 400px;
}

Dat is handig Thanks!