Table Overflows the Right Screen Border on Android
- 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
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