Can VFix and HFix be scrollable?

[matkuki]

Hi,

I tried making a VFix with a maximum height by setting the max-height: 200px; overflow-y: auto; but that doesn't seem to work. The layout stretches well past 200 pixels. I also tried overflow-y: scroll; but that behaves the same, only the scrollbar is visible but disabled. Is there a way to tell a layout it's maximum width/height, if there are too many items to fit inside it?

Matic

[almarklein]

Try setting the maxsize property instead.

(Since Flexx' layout needs to take both natural sizes and absolute positioning into account, it sets some layout-related style settings, so any values you specify in CSS may be overloaded.)

[matkuki]

I tried setting maxsize for a VFix to (100, 100) and set overflow: auto;, but this is what I get: It honors the width, but not the height. Any ideas? The TEST element is a label and the numbered elements are buttons, both have flex=0.

[almarklein]

mmm, I recall having similar problems when the VBox was inside a Widget. What fixed it for me, was instead of doing

class CustomWidget(flx.Widget):
    def init(self):
        with flx.VBox(...):
        ...

I did

class CustomWidget(flx.VBox):
    def init(self):
        ...

If that does not work, can you post a minimal code example that I can fiddle with?

[matkuki]

Here you go:

import os
import sys
import time
import inspect
import urllib.parse
import multiprocessing
from flexx import flx, ui, event, config

class TestLayout(flx.VFix):
    CSS = f"""
        .flx-TestLayout {{
            background-color: white;
            border: 1px solid blue;
            overflow: auto;
        }}
        
        .flx-TestLayout-label {{
            background-color: blue;
            font-family: Helvetica;
            font-size: 20px;
            font-weight: bold;
            color: white;
            text-align: center;
            display: table;
        }}
        .flx-TestLayout-label span {{
            display: table-cell;
            vertical-align: middle;
        }}
    """
    buttons = flx.ListProp(settable=True)
    
    def init(self):
        # Header
        flx.Label(
            flex=1,
            html=f"<span>TEXT</span>",
            css_class="flx-TestLayout-label",
            style=f"""
                min-height: 30px;
                max-height: 30px;
            """,
        )
        
        buttons = 10 * ["1", "2", "3", "4"]
        for b in buttons:
            button = flx.Button(
                1,
                text=b,
                flex=0
            )
            self._mutate_buttons(
                [button],
                'insert',
                len(self.buttons)
            )
        
        button = flx.Button(
            1,
            text="CANCEL",
            flex=0
        )
        self._mutate_buttons(
            [button],
            'insert',
            len(self.buttons)
        )

class TestApp(flx.Widget):
    def init(self):
        TestLayout(maxsize=(100, 100))

if __name__ == '__main__':
    config.port = 80
    app = flx.App(
        TestApp,
        title="TEST"
    )
    app.serve('')
    flx.start()

Thanks

[almarklein]

This is odd ... this should just work. I need to do some digging ...