Fixed toolbar at the top of the page

[critchie]

It has proven near to impossible to fix a toolbar/header at the top of the page and have the grid sit underneath this header. I want the header pinned at the top while the grid is scrollable underneath it.

I've tried various combinations of divs, flex settings and a couple of other hacks but nothing works. Once the grid overflows the window, the entire page is scrollable and the header scrolls off the top when scrolling.

I'm missing some combination of property settings or something. I'm trying to build a dashboard and I prefer to have the responsiveness of the grid turned off so the grid items don't resize. The user would use vertical and horizontal scrolling to view the grid items if they are off the page. To keep things clean I want the grid items to be fixed with no dragging or resizing and then let the user enter a Edit mode that allows them to move things around and resize them, change the dashboard name, etc and then save the changes.

But as I say in my initial assertion, I can't create a pinned header above the grid such that it doesn't scroll off the page when the grid overflows its container.

Suggestions? Anything may help.

[wuhkuh]

Put the grid in a div element where the div has got a margin at the top and bottom, for a header and footer, respectively. The height/width should be set to auto, to match the size of the grid. This div element should not be fixed and the margins should at least match the size of the header and footer.

Could you add a plnkr in case you don't manage to figure it out?

[critchie]

I'm not sure I followed all the instructions properly but I still can't figure it out. If you just take what I have and move the grid items around such that they overflow the page, a scroll bar will appears that will scroll the entire page, including the header.

plnkr here

[wuhkuh]

This should be the fix: plnkr. You only have to change the height of the background containing the grid - I made this a fixed height to show you what it looks like when scrolling.

Please keep in mind that this sounds more like implementing css than an actual issue with the angular2-grid package - I may be mistaken but this would not be the appropriate place to post this issue.