How to scroll canvas when keyboard pops up: mobile style?

How to
1

What do you want to achieve?

When a text field is focussed, unhiding the keyboard blocks the text field. I’d like to scroll the canvas to bring the text field back in view.
Would be nice if this was handled automatically like Android/ios

What have you tried so far?

Sizing the page down and repositioning it to make it scrollable, but couldn’t see a way to force a scroll to the active text box.

Screenshot or video

This is what i’d like to achieve:
Keyboard popup mockup 1

Others

  • SquareLine Studio version: 1.2.1
  • Operating system: Windows 10
  • Target hardware: ESP32-8048S043
2

It’s not supported out of the box, but you can do it with LVGL. See lvgl/lv_demo_widgets.c at e26a46c43c23e91198318659c8214cc34be5cee2 · lvgl/lvgl · GitHub

3

Thank you.
After posting I looked at the widget demo and found “Scroll on focus” Scroll — LVGL documentation
Looks like SquareLine does have a checkbox on panel Flags, but it doesn’t seem to work automatically as it’s not aware that the keyboard is blocking it.
I managed to do a workaround solution in SquareLine directly with a resizing action on the text field press, repositioning the panel with an animation.

Working 5 mockup_2

It will most likely fall apart/become too cumbersome with a longer page so I’ll use the method you linked to, thank you

1 Like