Capsule Close Location is Off

We’re using Capsule, with both an open and close Capsule. Our content, when open is long. When re-closed (by the Capsule close botton at the end of the text) the page jumps to the bottom of the page; bypassing the next section our content on the page.

Check it out. The Capsule we are referencing starts at the burnt orange section of the page with the header - What is Barbecue? Hardwood Coals • Meat • Time • Patience • Our Country. - https://bbqtipsandtricks.com

I’d consider this expected behaviour. The opening and closing is relative to the top of the capsule. So by the time you have scrolled down to the close button the top is high off the screen so the closing moves everthing up to that position. Thus it appears to jump to the bottom. Or rather the bottom of the page scrolls up.

Someone else may have an alternative idea.

Nice layout by the way.

1 Like

Thank you for the kind works regarding our layout.

We are still looking for a way to control the Capsule’s closed position, once opened and closed. Of not possible, we would appreciate other solutions that would give us the same layout (effect) with control of the closed position once opened and recluse.

Capsule is working as it should in your example.

Sorry, your answer was bit short and frusrating. I’m looking for a solution.

Im not saying that it’s a problem with Capsule. It’s the way Capsule’s landing spot, when closed in our layout that’s not ideal for us.

We were looking for a suggestion on how we could adjust the Capsule’s landing spot in our layout. Is there away to do it within Capsule or by changing our layout using Capsule. The last option would be a suggested different stack or layout strategy that would behave better with extended sections of text.

I am sorry you found my answer frustrating. The stack doesn’t operate in that way though, so I don’t have a solution for you. The stack is working as it should, it just doesn’t do what you want it to unfortunately, and thus I don’t have an alternative for you. The same behavior is occurring with the smaller blocks of text on your page as well, it just isn’t as egregious for you since it isn’t as large of a block of text as the one you’re concerned with.

OK Lets approach this a different way.

Do you have a suggestion on how we could adjust, improve on our layout, but still have concealed content with or without using Capsule? Would you suggest a different stack or would the results be the same?

Thank you for your assistance as we trouble shoot our layout, not capsule.

Do you really need a “Close” toggle at the bottom of the Capsule stack? Simply clicking on the top toggle to “untoggle” it will close the Capsule stack. Just curious.

I would consider re-designing with greater consistency in the user experience. While it might be appealing to have lots of special effects, it typically does not help the potential customer. So, for example, at the top of your page you use modals. Then you switch to capsules. You’d have greater consistency by using modals all the way down the page: either regular modals or in the case of your “big content” using a mega-modal. A user quickly learns what to expect when clicking on a “read more” or similar link.

In all honesty, however, I’d probably put all that “what is barbeque” content on a standalone page.

2 Likes

Great advice, we’re looking to work your suggestions into our site; Thank you!