Need CSS Help For RG

[help]

Hey guys,

I am having a little trouble with some CSS for a page (roadmap.announcefly.com) where on smaller height screen devices like mini laptios, I only want the repeating group to scroll but not the entire page to scroll, however on mobile devices the whole page should scroll.

I have the following CSS which only kicks in after the screen width is greater than 500px (desktop only):

<style>
@media only screen and (min-width: 500px) {
body {margin: 0; height: 100%; overflow: hidden}
bubble-element RepeatingGroup {
overflow-y: auto;}
}
</style>

It all works, except for the specific repeating group which stops scrolling as it’s inheriting the body CSS despite me specifying the bubble-element Repeating Group properties. It looks like this, where the bottom of the repeating group is cut off (by the height of the screen) but the scroll of the RG doesn’t work (you can see i’m trying to scroll and the RG just shifts up and doesn’t actually scroll the content.

Any idea to stop it inheriting?

Reece

[eli]

Have you tried adding ‘!important’?

[help]

No i haven’t actually i’ll give that a go thank you

[help]

!important isn’t working for it either

[eli]

You could try adding an ID to the RG element as well and target that directly instead of the generic repeating group element.

[help]

Good idea thank you! will try that

[help]

boom! Working and I also changed auto to scroll for the overflow property ]
Thanks a lot!

[eli]

Awesome!

[boston85719]

@help or @eli I am hoping one of you may be able to help me out with the same idea, just slightly different approach.

I’ve got the CSS making changes using Javascript (because I don’t know how to do any other way).

So far everything is working as I would hope, the only problem is my repeating group doesn’t scroll after I have changed the height of the page.

At first I changed the R.G. height and the scroll still worked. Then when I changed the page height in a separate workflow event, the R.G. stops scrolling.

This is the set up I have:

I have targeted my RG with an element ID and changed the height from the original 597px to 398px

At that point the R.G. still scrolled properly

Then I added and ran another JS to change the page height and that is when the R.G. stopped scrolling.

I attempted to add some CSS to that so the scroll would work on the R.G. but with no luck

I also tried to change the CSS so the overflow-y is set to auto but that didn’t work either

I also tried to do the “overflow” instead of “overflow-y” and that didn’t make it work either.

I am really unsure of what else I could try and started searching the forum and this is the only post on the topic that has a working solution but I am unsure of how to implement.

I tried another way from following this post but that didn’t work for me either

Any ideas about what might be a way to get the R.G. to scroll after the page has been resized would be much appreciated.

Cheers

[boston85719]

Okay, so I wasn’t able to get much assistance on this, but luckily my OCD stopped me from giving up and I figured out my own way to get this to work. I’m posting this in case anybody stumbles upon the thread and the previously mentioned “solutions” don’t work for them as they didn’t work for me.

What I ended up doing was first have a repeating group set up as full list.

I have the datasource with numbers from: until: for the purposes of pagination on this as well.

Then I needed to put the repeating group into a group container. This container is going to get a scroll bar added to it…this is because I found it impossible with the previous discussed ‘solutions’ to get the R.G. to actually scroll up and down after my page was resized. So instead of scrolling the R.G. I am actually scrolling the group that the R.G. is contained within.

To get the scrollbar added to the group I ran javascript using this little portion

I also use some other code to get the scroll bar to be hidden; it works on chrome but not firefox, and I haven’t tested it on any other browsers…but at least on chrome it looks nice without an actual visible scroll bar (kind of like an app)

Here is the whole javascript used

The main problem I have with this though is that I need to run the javascript a lot, so it is not ideal.

Hopefully some more experienced coders could shed some light on how I could change this javascript into some CSS or HTML that I could put onto the page or in the header to get the same effect without needing to run javascript.

@eli @help Do either of you have an idea of how I could change this javascript into some CSS or HTML to put on the page?