Can FlowPanels hide excess elements instead of wrap?

Anvil Q&A
1

I’d like to have a variable number of circles indicating chunks of progress similar to this: https://codepen.io/imsujan276/pen/JVZmgQ

On a wider screen, I’d like to show more circles. On mobile, I’d like to show fewer circles due to the smaller screen.

FlowPanel seem to almost meet my needs. Is there a way to make FlowPanel hide the first X circles and keep everything on the same line instead of wrapping? If not, is there a way to define a custom component based on FlowPanel?

This is what I have so far in a toy app: Anvil | Login

Thank you.

2

Adding flex-wrap: nowrap; prevents it from wrapping, but if the circles don’t fit, they spill to the right. You could add a scrollbar, but it would get busy.

If you really want it your way, you could create your own custom component with a canvas and draw in it.

Here is a quick example I made just to take a break: Anvil | Login

2 Likes
3

You’ll probably want to make this a custom component.
If you want to change the number of circles based on the screen width
A window resize handler might be the way to go.

Pseudo code:

from anvil.js import window

class CustomCircles(CustomCirclesTemplate):
    def __init__(self, **properties):
       ...

    def on_resize(self, e):
        width = window.innerWidth
        if width < 768:
            num_circles = 5
        else:
            num_circles = 10

        if self.num_circles != num_circles:
            self.num_circles = num_circles
            self.redraw()

    def form_show(self, **event_args):
        window.addEventListener("resize", self.on_resize)

    def form_hide(self, **event_args):
        window.removeEventListener("resize", self.on_resize)

Here’s a clone link to demonstrate:

2 Likes
4

Thank you for that code snippet.

I’m trying to bash your suggestions together :slight_smile: Is it possible to draw a series of buttons with a line through it? I’m trying to use @stucork’s app and put it over a canvas, but I can’t figure out how to overlay it.

I draw a canvas on the CustomCircles form, then everything is the same as Stu’s app. I can’t seem to get the canvas to show up.

Why is the Canvas not showing and is there a better way to draw a line through the buttons?

Copy of the WIP: Anvil | Login

5

one approach would just be to put a horizontal line in html/css - i’ve edited the first clone link to show you.
In the custom component click edit html to see what’s changed

The reason your clone isn’t behaving is because when you call self.clear() you are removing all the components, including the canvas element.

4 Likes
6

I have added the click event to the custom component.

Now you see a feedback when you move the mouse over any of the circles and the click event is fired when you click.

2 Likes
7

Thank you for the idea, @lclu!

I have improved the mouse pointer and graphic feedback to my custom component, and I have also added an icon, and I like it!

I think I will use it soon in my apps.

PS: I strongly believe that the Anvil way to address this, is with a custom component, and struggling to get buttons to behave the way you want on any device and form size is going to be much more difficult than creating a fully reusable mini-custom component like this one.

2 Likes