option for max height of parent

[ghost]

if possible can you add a attribute like "fill parent"? this way its possible to create layouts with fixed header and scrollable columns, right now i haven't found a way to realize such a scenario.

for example:

<screen>
    <page>
        <box fit>
            HEADER
        </box>
        <box style="background:red;">
           <hbox>
               <box style="background: purple; overflow-y: scroll">
                   <div style="width: 20px; height: 2000px; background: blue;"></div>
               </box>
               <box>
                   RIGHT
               </box>
           </hbox>
        </box>
    </page>
</screen>

[runspired]

What you want is possible (and not difficult), I'll create a demo later.

[ghost]

oh ok many thx, then i have misunderstood something ;-) sorry

[ghost]

any news?

[mk-conn]

+1 Would also be interested in a demo :)

[RobbieTheWagner]

@onceatime and @mk-conn can you guys elaborate on what you are trying to achieve? I can try to throw something together.

[xtagon]

I'd like to figure this out too. My use case is a full-screen app layout, where you scroll individual containers and never the entire page. Here's an example using flexbox directly but not Flexi: http://bl.ocks.org/jfsiii/5380802 (just add overflow: scroll to the column containers).

@rwwagner90 or @runspired can either of you suggest how to do this with Flexi? Sounds like it should be simple but I can't seem to get it right.

[xtagon]

Thought I solved this but it's not working still. Removed my original comment since it still doesn't add the scrollbars :(

[RobbieTheWagner]

Hi @xtagon you have it working with normal flexbox? Should be fairly easy to convert something that works in flexbox to flexi. If it's working as you want in flexbox, let me know.

[xtagon]

@rwwagner90 Thanks. I finally got it working by adding height: 100% to the box that has overflow: scroll. For some reason it doesn't work with just <box fill>

[RobbieTheWagner]

@xtagon would you be interested in contributing the example you are talking about here to the flexi dummy app, for us to show as an example?

[xtagon]

@rwwagner90 Absolutely. My case depends on some quirks with how I'm using Semantic-UI's sidebar pusher in my app, but I should be able to put together a more minimal example.

[RobbieTheWagner]

@xtagon great! Please let me know if you need any help figuring out where to put all the stuff for the examples.

[xtagon]

@rwwagner90 I can use some help. I looked at recent PRs for the examples and tried to follow that as a guide. I created a route, linked to it in the index, created a template for my layout and a route component with a template. I just copied the SVG and template snipped from another example, but it won't render in my browser so I must have missed something.

You can see what I tried here: https://github.com/xtagon/flexi/commit/b554267d6eb4dadea9ea5dc8398302df20166f95

[RobbieTheWagner]

@xtagon I think the issue is your component has no dash in the name. Components must be dasherized.

[xtagon]

Opened PR #130