beeware / beeware/toga

Table Overflows the Right Screen Border on Android

Open
#3,390 1 comment 0 reactions 0 assignees View on GitHub
android bug
Dominant language
Python
Stars
5.4k
Forks
827
Avg merge
9h 45m
Merged PRs (30d)
58

Description

### Describe the bug

Hello. I'm writing an APP to display wifi scan results with a ```Table```.

It used to be like this, and the table overflows the right screen border due to long texts in the data:
```
class WLScan(App):
def startup(self):
self.main_window = MainWindow(title = self.formal_name)
# ...
self.wifi_table = Table(
style = Pack(flex = 1),
headings = ["I", "BSSID", "SSID", "RSSI", "FREQ"]
)
self.loc_ti = TextInput(
readonly = True, value = "Location: (NaN, NaN)"
)
self.main_window.content = Box(
style = Pack(direction = COLUMN, flex = 1),
children = [
Button(
"Rescan",
on_press = self._rescan_handler
),
self.loc_ti,
self.wifi_table
]
)
self.main_window.show()
```

I don't know how to prevent it from overflowing, yet I think make it horizontally scrollable via a ```ScrollContainer``` is also a good idea:
```
class WLScan(App):
def startup(self):
self.main_window = MainWindow(title = self.formal_name)
# ...
self.wifi_table = Table(
headings = ["I", "BSSID", "SSID", "RSSI", "FREQ"]
)
self.loc_ti = TextInput(
readonly = True, value = "Location: (NaN, NaN)"
)
self.main_window.content = Box(
style = Pack(direction = COLUMN, flex = 1),
children = [
Button(
"Rescan",
on_press = self._rescan_handler
),
self.loc_ti,
ScrollContainer(
style = Pack(
flex = 1,
),
content = self.wifi_table
)
]
)
self.main_window.show()
```

It turns out not horizontally scrollable either, on my phone or android emulator. I generated some dummy data and run toga directly on my computer, the table can be scrolled with the left or right key. So I think it's an android-specific issue.

### Steps to reproduce

1. Place a Table in a ScrollContainer, with long texts in the table to make it overflow the right screen border.
2. Run on android
3. Left/right swiping cannot scroll on the screen.

### Expected behavior

ScrollContainer should be horizontally scrollable on Android

### Screenshots

[]([Image](https://github.com/user-attachments/assets/79edf992-f700-408c-a052-31b8a433880b))

### Environment

- Operating System: Android 13 arm64
- Python version: 3.12
- Software versions:
- Briefcase:
- Toga: 0.5.0
- ...

### Logs

```

```

### Additional context

By the way, I'd like to know how to 1) fix the width of each column, and 2) make table not overflow the right screen border. Thanks in advance.

Contributor guide

Open the contributing guide

Research direction

Reproduce the overflow with a Table containing long cell text inside a ScrollContainer on Android 13, then compare the Android behavior with desktop keyboard scrolling. Trace the Android scrolling and touch-input path for this arrangement. Done means horizontal swiping scrolls the table on Android without the table extending beyond the screen.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, python
Domain
frontend, mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.