scrollable list within portion of the screen

[doubletake]

I have a list w/filter at top of screen and some other content below it (Label and Panel (100px fixed height). This list is populated from a service. When the list fills up, it pushed my label/panel off the screen. I would like content below the list to always be visible without scrolling and the list to become scrollable above it. I want the list grow on taller screens, but the panel to always stay visible without scrolling. What is the best way to design this type of split screen layout?

Use case: I want to user to find and select and item to edit from the list and edit it below in one screen. The list may be very long.

Thanks,
Don

[doubletake]

this is it with list populated and pushing panel off screen

[doubletake]

BTW, the list height is not editable in the properties panel to set it to a fixed height either.

[Illya Stepanov]

Hi Don - we will look for a solution and update you.

[doubletake]

thank you. I have a workaround for now -- moving the editable field panel to top and letting list go off screen.

But, in general, I believe there is a need for percentage-based layouts. Flex has HGroup and VGroup containers that accept percentages. They can be nested to provide say, 80% height container above a 20% container, for example. That would be cool feature for Appery.io to bring to the design table. Grids don't appear to give you this kind of control of layouts.

Appreciate the help.

Don

[Kateryna Grynko]

Hi Don,

Glad you got it working.
W'll think about it.

[Kateryna Grynko]

Unfortunately this won't be implemented soon because of JQM specialties.

[doubletake]

Understand. I just post any ideas as I think of them ... just in case you might add them in the future.

Thanks,
Don

[Brian6028327]

I have the same question - to make a scrollable list grid. So, there's no way to do it at all?

[Maryna Brodina]

Hello! You can do that using JS. On service success where you map the list you can check list size http://api.jquery.com/category/dimens... and if it's more then max size (you can calculate it using JS) then wrap list into div with fixed height set and CSS property:
codeoverflow-y: scroll;/code
This way you'll get list inside it's own div which won't replace elements below from screen.