Right now I have the text field set to “Stretch to fit content” - but the problem is - if the character count is too high (roughly 500+) the stretch to fit function will cause the pop-up to glitch out. (Note: I’m referring to a site that is designed for mobile device)
I don’t know if this can be changed on Bubbles end @emmanuel?
I would not consider it a bug really - because if the pop up is asked to stretch larger than the page that it originated from - it kind of defeats the purpose of the popup. (Edit: So in defense for Bubble - the pop up works the way it should! If a popup stretched too large on a mobile it would be a UX nightmare for current user to close the pop up - so - design flaw on my end)
I would like to use a pop up though for the sake of design - So does anyone know how I can have a scroll-able text field within this pop up? I do not really want to have to set a small character limit…
I have tried putting the text into repeating groups and other groups - I can’t seem to get it to work though.
Hey Jordan! I have used these settings to do that in a popup but only for the web so I’m not sure if it will show up differently for you on mobile. I just did a test with around 900 words and shrunk the page size down and it still works, so maybe this will do it!
This is great! Thanks a ton for your response/screenshots.
I tested your method out - and I was able to make it work on mobile!
–
I had tried putting a text field inside of a repeating group in a very similar way - but it was not working… The way I was retrieving data was a bit different though - with a set state and a fixed “text” field; maybe that had something to do with it?.. I don’t know
Anyway. It does work on mobile! I will just need to rethink how I populate my text field.
Awesome!! My pleasure! On mine, since I’m the only one who creates the text within the popup, and since I only want the repeating group to have one scrollable text entry, I just assign a unique title to the text, and then use the title as a constraint in the repeating group search:
My text field is technically dynamic.
I think an issue is - my popup’s data source has to be it’s own “set state” - and the text field (that I am trying to get to scroll) is a different data type then the parent groups.
Not even sure how to describe the chaos on this end. I actually still haven’t managed to get it to work with my scenario
But it CAN be done, that much has been established!
Ohhh! That is really tricky! I’m not too familiar with states so this may be too messy with something more complicated but, could you leave the popup’s data source empty (so just use the popup as a visual element) and then in the workflow tab do “When Popup is loaded” --> “Set state to” --> “Display List” then in the popup, have the texts in hidden repeating groups (new repeating group for each data type) with conditional statements for each that say this repeating group is hidden on page load, and only visible when “[state] is yes” (for example). That way each repeating group can have its own data type and is only visible depending upon the conditional formatting regarding the state?
I don’t know if I can. But I do appreciate your thoughts!.
The pop up is referencing data from the cell of a different repeating group, a comment feed.
If one of the comments - is a reply to another comment - a user can click a button - and a popup will show them “This comment is a reply to etc etc…” - which was working fine; until I introduced another repeating group within the popup (to get the scrolling to work) - synchronizing the repeating groups data in the popup with the rest of the situation seems to be super tricky for some reason…
I will sleep on it. I have a few other tricks up my sleeve if It doesn’t work (at least I’d like to think so )
Thank you again Faye, for working with me on it!
Best of luck with your Bubble project(s)!
Another option is to use an HTML element and manually write some css to make the text scrollable. A little bit or coding but it does the job. Your solution though works great.
Do you know if this will work for all mobile browsers? (it works on my iphone)
How do I reference a different font? If I am using one of the fonts from the library that you guys are using - do I have to do anything fancy?? (I will use a basic font like “Lato” though)
I figured it would. I don’t have much experience with this stuff - so thought I would ask to confirm.
OK that is good - I should be able to figure out the font thing.
I noticed it does not scroll as smooth as Bubble’s default repeating groups scroll though… I may keep experimenting with things. Thanks for the help on this!
@jordanfaucet, what solution did you ultimately choose? Any advise or lessons learned that would help other people, like me, who are looking to add scroll bars? Thanks!
So, as general advise - I would say: “there is no, one right way to accomplish something.”
The best solution for each app is dependent on context and user experience.
I’m working primarily with a mobile focus - and I am really liking the Ext. Vertical Scroll option right now - its great for utilizing mobile screen space.
But like I say - depending on the nature of the app, and the importance or UI position of the content you are wishing to scroll though - a popup or something with a vertical or horizontal scroll could be the best way…
Long story short - I have not needed to play around with any custom HTML. I am using the native repeating groups now - for all scrolling
I also would like to have a scrollable popup. However, that popup has to contain pictures, groups, text etc. So, I dont know if an HTML Element would work here?
What I would like to achieve:
(Note how there is a new scrollbar after clicking the picture)
Hey Pat, Is the Product content within your popup inside of a Group or a Repeating Group? One way would be to use a repeating group with vertical scrolling (1 row, 1 column) and have everything within the cell. You could then make the popup the length of a mobile screen, and this way the scroll bar would be within the popup itself. Prior to the popup being opened, you would use an action in the workflow which made sure that the repeating group in the popup only displays the product just clicked by the User.
If you’re using a regular group, I think you would need to use HTML to have the scrollbar inside of the popup, but I’m not 100% sure. Jordan’s method of using Extended Vertical Scrolling works great too - the only difference is the popup itself would expand as needed, instead of the scrollbar being inside of the popup itself.
Thank you Faye! Always great advice from your side.
The content is contained in several groups inside of the popup. That would mean that I probably have to use multiple repeating groups. Also, I assume that it will make everything a bit more slow and more complicated. Because at the moment I am just using “display data” to get all the necessary infos and with RG I would have to “Search” etc.
All just to have a scrollbar in the popup.
@emmanuel
It would be so cool if you could add the option “scrollable” or something to Groups or to Popups. This would help with mobile app design especially. To achieve things like this:
I know you used repeating groups at the end. But do you know if it would be possible to have HTML added to the popup in general (not only for text which would be inside the HTML?
You could use HTML elements in the pop up - ya. The whole thing could be an HTML element really…
You can fetch any dynamic data via an HTML element (including pictures etc, (so not just text)) but you would have to code a lot of the layout and functionality…
Using Bubble’s native elements shouldn’t make it slower - as its basically the same thing.
You should be able to achieve a scrolling affect in a group like that – if you make your popup group’s height longer than your apps height… and have it collapse when hidden (and use the collapse when hidden on any other internal groups to avoid white space).
as long as your group is invisible by default - and you have selected “collapse when hidden” - having a longer group then your apps default height, shouldn’t wreck anything.
added tip* - if your going to do what I just mentioned - do not use the popup element… just use a group element and make it “pop - up” if you know what I mean by default, the popup element wants to center itself on the screen, so it can throw things off a bit. Popups are much more appropriate on desktop apps I think.
