flet-dev / flet-dev/flet

canvas scrollbar not visible on page when scrolling

Open
#1,542 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Python
Stars
17k
Forks
694
Avg merge
1d 14h
Merged PRs (30d)
33

Description

Description
when scrolling a canvas control on a page the scrollbar is not visible. Therefore, scrolling happens one mouse wheel at a time instead of the option to slide the scrollbar.

Code example to reproduce the issue:

import flet as ft
import flet.canvas as cv

md1 = """
# Markdown Example
Markdown allows you to easily include formatted text, images, and even formatted Dart code in your app.

## Titles

Setext-style

This is an H1
=============

This is an H2
-------------

Atx-style

# This is an H1

## This is an H2

###### This is an H6

Select the valid headers:

- [x] `# hello`
- [ ] `#hello`

## Links

[Google](https://www.google.com)

## Images

![Image from Flet assets](/icons/icon-192.png)

![Test image](https://picsum.photos/200/300)

## Tables

|Syntax                                 |Result                               |
|---------------------------------------|-------------------------------------|
|`*italic 1*`                           |*italic 1*                           |
|`_italic 2_`                           | _italic 2_                          |
|`**bold 1**`                           |**bold 1**                           |
|`__bold 2__`                           |__bold 2__                           |
|`This is a ~~strikethrough~~`          |This is a ~~strikethrough~~          |
|`***italic bold 1***`                  |***italic bold 1***                  |
|`___italic bold 2___`                  |___italic bold 2___                  |
|`***~~italic bold strikethrough 1~~***`|***~~italic bold strikethrough 1~~***|
|`~~***italic bold strikethrough 2***~~`|~~***italic bold strikethrough 2***~~|

## Styling

Style text as _italic_, __bold__, ~~strikethrough~~, or `inline code`.

- Use bulleted lists
- To better clarify
- Your points

## Code blocks

Formatted Dart code looks really pretty too:

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: ft.Markdown(data: markdownData),
    ),
  ));
}
"""

def main(page: ft.Page):
    page.theme_mode = ft.ThemeMode.DARK
    page.scroll = "ALWAYS"

    can =  cv.Text(
                0,
                0,
                md1
             )

    cp = cv.Canvas(
        [ can ],
        width=float("inf"),
        expand=True
    )

    page.add(cp)

ft.app(main)

Describe the results you received:
when scrolling a canvas control on a page the scrollbar is not visible.

Describe the results you expected:
a visible scrollbar when scrolling a canvas control on a page.

Additional information you deem important (e.g. issue happens only occasionally):

Flet version (pip show flet):

Name: flet
Version: 0.7.4
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page: 
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: /home/george/dev/flet/venv/lib/python3.11/site-packages
Requires: flet-core, httpx, oauthlib, packaging, watchdog, websocket-client, websockets
Required-by: flet-material

Operating system:
Ubuntu Linux 23.04.

Additional environment details:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Run the provided Python reproduction with Flet 0.7.4 on Ubuntu Linux 23.04 and confirm whether the canvas scrollbar is absent while page scrolling. Trace the canvas and page scrolling behavior, then verify that a visible scrollbar supports sliding through the canvas content rather than only mouse-wheel steps.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.