Toon posts:

[bug][forum] Overflow van tekst in het zoekveld viewport

Pagina: 1
Acties:
  • 112 views

  • Raegin
  • Registratie: September 2003
  • Laatst online: 21:20
Op een viewport kleiner dan 786px breed loopt een lange zoekterm door buiten het invoerveld.



Op een tablet zul je er niet zo snel tegenaan lopen, maar op mobiel heb je aan drie lange woorden voldoende. Dit komt in ieder geval voor op Chrome op Android (Huawei Mate 20 Pro) en Chrome op MacOS.

De content van het zoekveld wordt opzij geduwd door combinatie van een position: absolute op de input en een margin-left in de volgende selector:
code:
1
#search .options + .keyword

Hierdoor verliest de input zijn overflow-property.

De position: absolute wordt alleen geplaatst binnen de volgende mediaquery:
code:
1
media="(max-width: 767px), (max-device-width: 767px) and (orientation: portrait), (max-device-width: 499px) and (orientation: landscape)"

Dit lijkt niets anders te doen dan dit bugje te veroorzaken, het zou kunnen zijn dat het nodig is om een ander probleem te verhelpen maar ik kan niet vinden wat dat zou moeten zijn. Het verwijderen van de position: absolute verhelpt het overflow probleem in ieder geval.

  • crisp
  • Registratie: Februari 2000
  • Nu online

crisp

Devver

Pixelated

Inmiddels gefixed :)

Intentionally left blank




Google Pixel 7 Sony WH-1000XM5 Apple iPhone 14 Samsung Galaxy Watch5, 44mm Sonic Frontiers Samsung Galaxy Z Fold4 Insta360 X3 Nintendo Switch Lite

Tweakers is samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer onderdeel van DPG Media B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee