mdPanel Scroll

[scriptsure]

Run into $mdPanel situation where if the information in the $mdPanel goes off the window there is no way to scroll to it. I did try messing with the parent scroll, layout-fill, using md-content... but i am unable to get a scrollbar to appear inside the $mdPanel content area, AND have the $mdPanel only extent to the bottom of the page. I did try and use the parent scroll on the example on the demos site but it does not appear to change any behavior... Here is a code pen to demo my issue:

http://codepen.io/scriptsure/pen/YWXNNX?editors=1010

Thanks
Aaron

[ThomasBurleson]

@ErinCoughlan - can you review/investigate ?

[ErinCoughlan]

You are able to scroll the content within an $mdPanel. I modified the panel menu demo here to have a set height and scroll. (Using overflow: scroll and explicitly setting the height.)

As for the menu appearing off screen, you can provide backup positioning configs that will move the panel back on screen. The panel tries each position until it finds one that is on screen. If no positions are on screen, we fall back to the last position provided. Having something like: "try to place the panel below the element, but if that doesn't work place is above" would fix your demo.

disableParentScroll will prevent the attachTo element from scrolling, but since there isn't enough room to begin with, it has no effect on allowing scroll. (If you arbitrarily set the height of the content area to something large, you can see the effects of disableParentScroll.) The panel uses position: fixed which is why no space is added for it. We recalculate that position on scroll, but that requires there be enough content to scroll.

[ErinCoughlan]

This may also be helpful: Issue #7878 will add intelligent positioning, so rather than you having to provide the backup positions, if all positions fail, we'll just put the panel somewhere on screen. That will also fix this scrolling issue since the state you are in now would be impossible to get to.

[ThomasBurleson]

I also see this issue with backdrop and scrolling:

[scriptsure]

Moving the mdPanel to a new location i dont think will fix our use case cause it could be very long... we are using it almost like a menu drop down. Is there a way to build into the panel the ability to calculate and set the max-height from the point of the open position minus the height of the parent container? This would allow it to stretch to the bottom of parent and if the mdPanel has a md-content tag it will provide a nice scrollbar....

[ErinCoughlan]

By new location, I meant position the panel the top of the element instead of below it (which is the behavior of menus in most apps when they are at the bottom of the screen) and would be the default behavior once the intelligent scroll is created.

Like this:
.addPanelPosition(this._mdPanel.xPosition.ALIGN_START, this._mdPanel.yPosition.BELOW) .addPanelPosition(this._mdPanel.xPosition.ALIGN_START, this._mdPanel.yPosition.ABOVE);

You can also manually set the height of the panel after it is rendered if you really need a dynamic value to the bottom of the screen since at that point you have access to all elements and hooks to the points when the panel is rendered.

I don't think we want to restrict the height of the panel by default since that would not work with tooltips or dialogs. The solution from the panel's point of view is to implement the intelligent positioning. It is up to the users to style the panel, including setting the dimensions and making sure there is enough room on the screen for it.

[scriptsure]

Yeah i have certainly played with just setting a manual height.... But that causes issues in some cases where the item being clicked is toward the bottom the page. I can put additional logic in to open above the element clicked and that will help. BUT in most cases stretching to the bottom of the page, then allowing the md-content to present the scroll will work perfect.... so from the sounds of it.... you think that the 'intelligent scroll' is something that will be in the works??? If so can you give an estimates on time?

[scriptsure]

Erin anymore thoughts on this in terms of solutions? @ThomasBurleson ?...

[ErinCoughlan]

@scriptsure Is this still an issue for you? Intelligent scroll is NOT in the works. Intelligent positioning is. These are different concepts. Intelligent positioning tries to keep the panel on screen, but if the panel is 5 times the available height, no positioning can fix it or make it visible. I don't know what an intelligent scroll would do since adding scrollbars to some panels would actually make them unusable. Scrolling is not a behavior the panel should control since it depends entirely on how you are using it.

All scroll behavior is controller by you. The panel does not have anything to do with scrolling or heights. You have access to the panel-container and all of the content within the panel.

[scriptsure]

What I was hoping for was that if no position would work to fit the panel, that you could set the max-height of the panel. Assuming there is a md-content then a scroll bar would take over.

[ErinCoughlan]

I'm not a fan of "assuming there is an md-content". That's not a requirement of using the panel and having some behavior that assumes it is counters the flexibility of using mdPanel in the first place.

I'm not sure how this behavior is any different than you doing that calculation on your own and setting max-height (since you control that element, not the panel).

[scriptsure]

well the calc isn't super easy... thought it would better in the actual directive. Have to take the window position where it is clicked then subtract the height of the window.... and not sure if this is an automatic thing, the panel opening up in the best position... but dealing with all those potential issues.

No big deal if there is no md-content right? You are just setting the max size. Even if there is no scrollbar i can't think of a use case where you would want an md-panel to run off the device window! Forgetting the scrollbar, it would be much better presentation to set the max-height after you determine the best positioning to ensure visually you have the panel, all 4 sides, and the shadowing in view....

[ErinCoughlan]

@scriptsure A common use case where you wouldn't want to chop the panel at the window size is when you allow the background to scroll, so you can see the full panel when you scroll down.

[scriptsure]

ok... well unless i am doing something wrong the example online doesnt seem to respond correctly. Also when you get on touch devices, when you go to scroll you could potentially close the panel in the process.. right?

[ErinCoughlan]

You don't have to close the panel when clicking on the container. That's a config option that defaults to false.

[scriptsure]

so i guess i am on my own on this one?

[topherfangio]

IMO, $mdPanel is meant to be a fairly low-level implementation, so it' doesn't try to cover every use-case, instead letting you (the developer) have more control. So I would think this is something you should handle if you're making a "component" that uses the panel.

That said, is there a reason why you are using it instead of a standard menu? I believe our menu has this functionality built-in...

[scriptsure]

not near as nice... for our use case... we need a lot of flexibility with the presentation of each item in the list. Plus the menu does seem to have that built in....

[scriptsure]

actually it does have scroll built in... but i still prefer the panel

[clshortfuse]

Unfortunately, that sits in a between a limbo of md-menu being too precise and md-panel being too generic. But, I personally think what you want is related to: #7878 and I advise watching that issue.

[scriptsure]

Does anyone have a good approach on how to implement a max-height on open if the panel?

[scriptsure]

@ErinCoughlan do you have any approaches on how i could build this logic into the mdPanel? Setting the max-height on open!!! I know there is quite a bit of stuff going on in the background as it opens....

Thanks

[ErinCoughlan]

@scriptsure Have you tried using the callbacks? They were built for this purpose. Either onOpenComplete or onDomAdded. I think onOpenComplete would work better. open and show also return promises that you can chain the setMaxHeight.

[ErinCoughlan]

In summary, mdPanel is intended to be as dynamic as possible and allow for any use case. User specific problems should be handled by the user. In your case, you can set the max-height manually, even if it involves doing math about positioning and screen size.

[EladBezalel]

@ErinCoughlan is right, user specific use cases should be handled by the user.

If you still think this should be part of mdPanel please submit a PR and we will consider it.

[scriptsure]

@ErinCoughlan you have made it ABUNDANTLY clear that this is my issue! I was simple asking for an approach that works with the implementation of the mdPanel. In this case I respectfully disagree that there should be some kind of OPTION to stretch only to the bottom of the page. An OPTION, not an absolute restriction. Fact is a mdPanel will more rarely be used rolling off the bottom of the page! ALSO, the disable parent scroll option does NOT work... could be a work around for our use case but... if you go to the sample and open either example, the scroll does does work.

[ErinCoughlan]

The demo site disableParentScroll is working. When the checkbox is not checked the page scrolls behind the dialog. When the checkbox is checked the page does not scroll.