How to anchor an element without making it a floating group?

Need help Responsiveness
1

Hello

I’m trying to figure out if it’s possible to have elements that function like a floating group but without making them floating groups.

In the video below, I have two rows.

Row 1 has the Business and Project elements.

Row 2 has the Scope, Edit, Publish, and Present elements.

https://www.loom.com/share/5a0f559f5df4411b8e09004cfbc699a9

Each element sits within another element. What I want to happen is that when the page is scrolled, those elements remain in view. However, I do not want to make them floating groups because I want them to sit within their respective groups.

For Row 2 in particular, I want it to sit where it is, while the rest of the elements underneath, which are part of the same parent group, are scrollable, if that makes sense.

Can someone point me in the right direction?

Thank you

2

off the top of my head, you can look into CSS documentation, namely, position and float. I’ve also come across this problem when building for a client.

You can add it to your app with the classify plugin.

Though, this is also a good idea for a custom (free) plugin once I get the time :slight_smile:

2 Likes
4

Thanks for responding.

I’m not well versed in CSS, but I’ll take a look at this plugin and google some stuff.

Would you have an example of how this code would look? That would give me a better understanding of how to implement it. Or maybe a link to a website that has examples.

Thank you

5

Hey there, @knocode.

I’m having a hard time visualizing exactly what you need. Can you point to an existing page somewhere on the web that does what you want?

If you’re simply saying that you’d like some content within a container element to scroll independently of the page, then that should be possible.

If that’s not what you mean, it would be helpful to have some additional information/clarification.

6

You mean like this?

If so, you need simply configure a group to fill vertical height (or to desired height) and to scroll when content overflows…

scrolling-group
scrolling-group712×1332 80 KB

If you mean something else, further clarification would be helpful.

7

Hello. Thanks for chiming in. I provided a video link in my post to demonstrate what I meant. But perhaps I can further explain.

Let’s say you have a column group. Within that group, you have 2 groups, the top group will be a header and the bottom group can be whatever you want.

When you scroll down the page, you want the header group to remain visible like a floating group at the top, but without making it a floating group, because you want it to stay within the parent column group. That is basically what I’m talking about.

If you need further clarification, I can record another video.

Thank you

8

Also, yes. Like in your demonstration.

I will check out your suggestion.

Thank you

1 Like
9

Hello again.

May I ask how you got rid of the two-scroll bar issue?

Using your method, I now have an scroll bar on the element and on the page itself. But in your demo, even though the contents of your element are scrollable, the page itself is not.

How do I do this?

10

Just set the Min height of the page itself to zero (or a really small number) so that the page scrollbar never appears. (What you’re seeing is a scrollbar for the page itself and another for the scrolling group.)

BTW, independently scrolling groups can be created anywhere within the content of a page, so you could conceivably have more than one on a page. Sounds like you just need one for this particular layout though.

EDIT

Here’s an edit mode link if it helps.

And yes, it helps to set the Min height to a large value while editing, but it should be changed back to a small value before deploying.

1 Like