Nice to have: vertical slider and table wizard

[zappfinger]

I really would like to see a vertical slider. A table wizard would also be handy. Although the latter could probably be created easily with a label and som HTML code...

[almarklein]

Thanks for the suggestions. I think the slider should probably become vertical when its height is larger than its width.

[zappfinger]

That is likely to work. But how do I set these properties?

[almarklein]

Sorry, what properties do you mean?

[zappfinger]

The height and width properties of the slider. They are not available in Flexx, so I have to somehow set the HTML/CSS/JS properties of the slider...

Op ma 24 sep. 2018 om 22:37 schreef Almar Klein [email protected]:

Sorry, what properties do you mean?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/flexxui/flexx/issues/494#issuecomment-424116171, or mute the thread https://github.com/notifications/unsubscribe-auth/AFkYZ7awuDOPqxd3lALAph-h3ZlWPczyks5ueUJygaJpZM4W2ZMv .

[almarklein]

Oh, right. The layout generally determines the size of a widget, e.g. depending on the flex values. But also the DEFAULT_MIN_SIZE class property is taken into account, which is (40, 20) for the slider, so indeed it is geared to be more horizontal. That said, in this example, the slider on the right could be made to become vertical:

from flexx import flx

class Example(flx.Widget):
    def init(self):
        with flx.HSplit():
            with flx.VBox():
                flx.Widget(flex=1, style='background:#f00')
                flx.Slider()
            with flx.HBox():
                flx.Widget(flex=1, style='background:#0f0')
                flx.Slider()

flx.launch(Example)
flx.run()

[zappfinger]

This does not work at all. I also tried with CSS, but this gives a very strange result: a mix of a horizontal and vertical slider:

class Example(flx.Widget):
	CSS = """
	.flx-Slider {
		-webkit-appearance: slider-vertical;
		width: 20px;
		height: 100px;
	}
	"""
	def init(self):
		flx.Slider()

[almarklein]

Ooh! I think we have a misunderstanding :) I wrote "I think the slider should probably become vertical when its height is larger than its width.". What I meant with that this should be the behavior when we implement a vertical slider. At this point in time, Flexx does not have a vertical slider. Sorry for the confusion!

[zappfinger]

Ok, I see. But would it not be easier and consistent to implement this behaviour via (raw) HTML/CSS properties?

[almarklein]

As in turn a slider horizontal/vertical? Yes this could well be. Maybe auto-mode by default, and an ability to explicitly set it. But I have not thought about it much yet. And I don't know yet how hard it would be implementation-wise.

[drafter250]

Doesn't phosphor.js have a really good table widget that they have shown off in the Jupyter lab demo's ?

[almarklein]

Yes, they have. Flexx does no longer depend on Phosphor, but it should be possible to load it as an asset and use the table that way.

We should distinguish between different kinds of table widgets though :) I was thinking about a widget to layout child widgets in a table, a bit like the FormLayout. The Phosphor thing is a leaf widget for tabular data :)

[zappfinger]

Sounds good! Since a table element could also contain an another element, like a button. Also, any table cell should be clickable... I managed to hack a (static) table by using only Labels and HTML, but it is not so nice.