Chat (On-screen keyboard avoidance)
This example demonstrates keyboard avoidance in a chat interface.
This example uses the VirtualKeyboard API and sets navigator.. The bottom sheet leverages the keyboard-inset-bottom CSS environment
variable to adjust its height and bottom margin automatically.
As a fallback for browsers like Firefox that do not support the
VirtualKeyboard API, the interactive-widget=resizes-content attribute
is set on the <meta name="viewport"> element.
On iOS Safari, which supports neither method, the bottom sheet listens for window.visualViewport resize events and updates the --sw-keyboard-height CSS custom
property to adjust its height.
Dummy text to make the content scrollable
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget nisi ut velit fermentum ornare. Ut ullamcorper mi id orci malesuada, sed fringilla orci pharetra. Sed nec iaculis felis. Sed in auctor enim. Aenean rhoncus, nulla nec finibus auctor, lacus magna placerat arcu, pellentesque consectetur lacus lectus ut quam. Donec eget suscipit ligula. Mauris vel bibendum sapien. Praesent varius magna lacinia sapien facilisis tristique. Nulla sit amet felis fermentum, condimentum magna at, elementum purus.
Suspendisse eget suscipit ipsum, eget auctor velit. Vestibulum nec ipsum placerat, dictum tellus pharetra, ornare massa. Integer posuere augue a justo egestas tincidunt. Ut cursus bibendum lorem sed lobortis. Nam nec aliquet dui. Maecenas dictum auctor tellus quis placerat. Etiam ac diam ac urna vestibulum maximus. Proin luctus elit molestie, hendrerit elit et, sodales diam. Pellentesque ipsum tellus, dapibus sit amet cursus et, ultricies ut erat. Proin sodales ipsum vitae volutpat lacinia. Nulla facilisi.
Nunc bibendum dolor viverra tortor euismod, nec ultricies urna tempor. Mauris suscipit non risus id maximus. Integer facilisis ligula lacus. In eu mi at neque dapibus fringilla ac eget dui. Aenean tincidunt ex non orci malesuada tincidunt. Pellentesque ullamcorper vitae purus a bibendum. Nunc eget orci gravida, eleifend risus et, commodo est. Phasellus facilisis ex eu odio ultrices, vel ultrices eros accumsan. Nam blandit facilisis erat, quis tristique ante ultrices eget. Integer malesuada dictum leo, non venenatis ipsum convallis at.
Nunc mauris felis, placerat a eros vitae, eleifend tristique nisl. Vivamus nec pharetra mi. Etiam nec dictum sem, pulvinar cursus nisl. Fusce finibus viverra ante. Fusce eros lorem, hendrerit ac iaculis faucibus, tempus sed tortor. Vestibulum iaculis nisl nec neque tristique, id porta nunc tempor. Cras sed bibendum lectus, in interdum nisi. Nam vel ex in lorem lacinia lacinia.
Aliquam volutpat nulla purus, ac tristique elit ornare at. Sed semper faucibus tellus nec tempor. Curabitur euismod lectus non ultricies ultricies. Etiam gravida sodales odio, non lacinia neque rutrum vel. Morbi imperdiet risus sed dapibus ullamcorper. Nullam feugiat eleifend tincidunt. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam et libero condimentum, dignissim ipsum at, placerat magna. Quisque porttitor pretium ligula, sed pulvinar leo commodo ac. Sed semper, eros ut ultricies consequat, erat dui fringilla justo, nec cursus turpis justo non lacus. Cras maximus odio massa, sit amet efficitur neque ornare a. Ut euismod porta ante, eleifend fermentum nulla congue sed. Quisque efficitur, risus at mollis dapibus, ligula neque porta ante, in sollicitudin tortor justo vitae nisl. Praesent et nulla ac velit iaculis semper eget ut ante.