Upvote 1

Dynamic Panel Scrolling and Image Placement Issues

Solved Leslie Cahill ● ago

Hi There! I have a tall/long image that I am placing within a dynamic panel. I am simulating a long message/chat thread. I need the default placement of the thread to "stick" where I put it (so the bottom of the thread is visible by default). I also need the panel to scroll the entire thread, so users can go all the way to the top. Right now, the image keeps shifting up by default. And, I can't scroll the entire thread. Any tips?

Replies (1)

Danielle Schneider ●

You could try pinning the image in the panel. Select it and go to the Properties palette. There, tick the 'display pin position options' box, and for the 'Y' parameter, select 'pin to top'. Is what what you're looking for?

Can you explain a little more what you mean by how you can't scroll through the entire thread? Is there any scroll of the panel? What are your scrolling (overflow) options in the Properties palette?

Leslie Cahill ●

Hey! I attached an image to try to illustrate. The conversation thread is one long PNG. I've placed it within a dynamic panel. I want the bottom of the thread to be about 1 inch above the bottom of the panel initially. The top of the thread goes outside the margins of the prototype completely. Could that be part of the problem? I'm trying to simulate scrolling through a lot of content.

Files:

Leslie Cahill ●

When I pin to the bottom, the default placement is good. But, then the content won't scroll.

Leslie Cahill ●

Sorry - scrolling options are "auto". I've also tried "always".

Danielle Schneider ●

Ah I see. If I'm understanding what you're looking for, you could try this:

Place a hotspot at the bottom of the Panel. This will will have two functions - first, it will be a margin at the bottom of the image so it's not directly at the bottom of the panel. It will also serve as an anchor that we use an event to scroll to. Create an "On Page Load" + "Scroll to" event, scrolling to that hotspot. Unfortunately there will be some easing for the scroll even if there's no easing set (that's something we've got on the backlog to fix).

I've attached an example of that.

Files:

Leslie Cahill ●

I tried to do what was in your example. It sounds like it should work - and I could see it working in your example file. However, it's not working in my file. For my prototype, the messaging panel is actually hidden on page load. I "show" it after clicking on another object within the prototype (there's a flow before the panel appears). Could that be the problem? The good news is, I figured out the nuances with where/how to place the image so the entire image is scrollable. The bad news is, it is still defaulting to the top, instead of the bottom.

Leslie Cahill ●

Figured it out! I added an event to scroll to the hot spot along w/ the event to display the panel. Thank you for your help!

Danielle Schneider ●

Great! Glad to hear that.