[Feature Request?] Preference to set the top-level container to display:flex...

[jmacqueen]

...and the other associated layout properties that go along with flexbox.

Rather than entering placement values on a widget-by-widget basis, I want to use the awesome power of flexbox to handle the layout for me!

I don't know if this is a feature request or if I'm just missing the way it could be done today.

To do this, I need to be able to set:

• [ ] display: flex
• [ ] flex-direction
• [ ] flex-wrap
• [ ] justify-content
• [ ] align-items
• [ ] align-content

on the main container that hold all of the widgets. I believe I can already set the relevant properties at the widget level.

[hawkrives]

I think that what you really want is to be able to use Grid Layout, since flexbox only really works in one direction (per container, but then you'd need row containers too or something, and … yeah. That way lies madness.)

Unfortunately, Grid Layout is not yet really implemented by anyone other than Microsoft (WebKit bug, caniuse data).

So, to answer your original question, it's entirely possible!

You just need to include an external <link> to a stylesheet, since external style sheets aren't namespaces like the widget-specific ones.

Then we can just target the existing containers, and voilà!

Example:

refreshFrequency: false

render: () ->
    # note that this path is relative to the Widgets folder, not to this widget.
    return '''
        <link rel="stylesheet" type="text/css" href="/common/base.css">
    '''

body {
    display: flex;
}

[id^='widgets'] {
    flex: 1;
}

Let us know how it goes!

… alternately, I suppose of bunch of flex: 1 spacer widgets and a wrapping container could make rows. But that also seems like a ton of work.

[felixhageloh]

If this works out as @hawkrives suggests I'd also prefer not making this the default. My experience with flex boxes is a few years old but I don't have good memories. More specifically, in this case I'd have to check first how this would affect the current way of positioning widgets.

[jmacqueen]

Thanks @hawkrives! I was hoping I was just missing something. I can't wait to try it out. I'll probably just have a widget whose entire job is enabling flexbox so I don't have to remember which one I put it in :smile:

Grid layout would be neat someday I guess, but I can do a LOT with Flexbox once I start leveraging margin: auto, explicit ordering and the various aligning modes. I get annoyed at having to absolutely position everything and the inherent difficulties that crop up when I switch between being connected to my big monitor or work just on the laptop. I also have a couple of widgets that can vary in size a bit (active port lists for local development...they can change a lot depending on how many of our microservices I have running locally) and the occasional overlap is annoying.

I doubt I'll set flex on the widgets in the main stylesheet. It should be unnecessary as it gets set by default...and it's far more flexible to set it on individual widgets, anyway.

[jmacqueen]

Ohhhh...that doesn't even slightly work :frowning:

Looks like display: flex needs to be set on #__uebersicht, which would then control the next level down of elements. But these are zero-width divs that then contain the widgets. So it looks like no love for flexbox. I'll poke around some more and see if I can make something go, but I'm not optimistic.

[jmacqueen]

Okay. I've worked it out! The gist for the enabeling widget is here.

The only annoying bit is that you have to do something like

update: (output, domEl) ->
  $(domEl).parent('div').css('order', '2')
  $(domEl).parent('div').css('flex', '1 0 35em')

to set the relevant flex css on the individual widgets. But I now have pretty decent, flexible control of placement and explicit ordering, so I'm happy :smile:

[Pe8er]

Just chiming in — I managed to get it to work in a vertical manner! Thank you so much @jmacqueen.

[CarlosMed]

@Pe8er Care to share your widgets lol

[Pe8er]

@CarlosMed I will submit it to the official repository once I'm done cleaning them up.