Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

option for max height of parent #44

Open
ghost opened this issue Apr 1, 2016 · 15 comments
Open

option for max height of parent #44

ghost opened this issue Apr 1, 2016 · 15 comments

Comments

@ghost
Copy link

ghost commented Apr 1, 2016

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:
screenshot 2016-04-01 19 44 25

<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
Copy link
Collaborator

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

@ghost
Copy link
Author

ghost commented Apr 1, 2016

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

@ghost
Copy link
Author

ghost commented Jun 30, 2016

any news?

@mk-conn
Copy link

mk-conn commented Jul 1, 2016

+1 Would also be interested in a demo :)

@RobbieTheWagner
Copy link
Member

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

@xtagon
Copy link

xtagon commented Apr 17, 2017

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
Copy link

xtagon commented Apr 17, 2017

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

@RobbieTheWagner
Copy link
Member

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
Copy link

xtagon commented Apr 17, 2017

@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
Copy link
Member

@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
Copy link

xtagon commented Apr 24, 2017

@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
Copy link
Member

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

@xtagon
Copy link

xtagon commented Apr 26, 2017

@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: xtagon@b554267

@RobbieTheWagner
Copy link
Member

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

@xtagon
Copy link

xtagon commented Apr 27, 2017

Opened PR #130

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants