egui eframe TextEdit on mobile

[Philipp-Sc]

Hi, thank you for creating this awesome repository. It's a lot of fun!

Is there a way to disable the following behavior?

On Mobile when the TextEdit gets focus (via touch, or click on the TextEdit area), the keyboard pops up AND the position of the Canvas is pushed up 30 to 45% leaving a gray space between the canvas and keyboard.

Am I missing something?

This can be reproduced by using this code here, a live version can be found here. (live version now contains a workaround)

Relevant code:

eframe/src/web/text_agent.rs

            // Move up canvas so that text edit is shown at ~30% of screen height.
            // Only on touch screens, when keyboard popups.
            if let Some(latest_touch_pos) = runner.input.latest_touch_pos {
                let window_height = window.inner_height().ok()?.as_f64()? as f32;
                let current_rel = latest_touch_pos.y / window_height;

                // estimated amount of screen covered by keyboard
                let keyboard_fraction = 0.5;

                if current_rel > keyboard_fraction {
                    // below the keyboard

                    let target_rel = 0.3;

                    // Note: `delta` is negative, since we are moving the canvas UP
                    let delta = target_rel - current_rel;

                    let delta = delta.max(-keyboard_fraction); // Don't move it crazy much

                    let new_pos_percent = format!("{}%", (delta * 100.0).round());

                    canvas_style.set_property("position", "absolute").ok()?;
                    canvas_style.set_property("top", &new_pos_percent).ok()?;
                }

I am using the latest egui/eframe release: 0.19.0

Thank you in advance for investigating this.
Philipp-Sc

[Philipp-Sc]

I updated my code to use the latest code from GitHub. The issue persists.

[Philipp-Sc]

I added a workaround, to debug this issue, it can be reproduced using the following rev:
https://github.com/Philipp-Sc/librelearning/tree/0e7ad454f18fcf200b4a446a6b2246f6c409da56

The workaround consists of adding a CSS class with "top: 0% !important" to the canvas that enforces the position.
That fixed the problem for me.

The function to adjust the canvas position still fires, but has no effect, optimally in a future release it can be removed or made configurable (turn on/off).