I got the tinder pile set and working, but would like to elongate the dimensions of the pile to give a better look for portrait images. However there are no ways to do this in the properties tab. How would one go on about editing this, I’m assuming it would require editing the CSS styling, but am not sure on how to do that. Any details on how to do so would be appreciated.
Thanks
1 Like
Hello,
First you need to enable HTML IDs.
Then download this plugin.
Put the Browser element that comes with the plugin somewhere on the page.
Create a workflow
Page is loaded > Get Screen Height From Browser (This action in the elements actions)
Save the number returned by this plugin. Custom state is a good way to do this.
Switch to tinder pile element and define an ID for it.
Put an HTML element in your page and add this CSS Code:
The SearchR Screen Height expression you see here is my Custom State. Use your own here.
You recorded the screen height with the workflow, specify how much it should be shortened according to the screen height. Your Custom State Number - 200px, like.
You will have to make more fine adjustments on different screens, and you can solve this with conditions.
Obviously, the problems you will experience with Tinder Pile will not end there. If you wish, there is another plugin where you can make these settings much easier, you can use it.
Hope it helps!
Eren
1 Like
I can’t say much else beyond what was suggested in the detailed response by @eren
however, I would suggest not to use the browser plugin and instead use the page height plugin by Bubble…it doesn’t require workflows to get set, and the value is dynamic, so if a user is decreasing or increasing the height of their browser window, the value updates in real time.
3 Likes
I missed this plugin. I didn’t see the official plugin of Bubble, is it possible for you to share the link?
There is no forum showcase…just go to the marketplace and search ‘page height’
Could the image have misled you? This plugin is not official and I couldn’t find any other.
However, since it serves only one thing, it can be much lighter and suitable for this issue.
1 Like
Yeah…that definitely is misleading…I always thought it was built by Bubble.
But yes, it is much lighter and as it is dynamic it is better to use for most situations requiring the page height data…I use it for getting completely dynamic and responsive design for mobile because it can adjust automatically when the user rotates their device.
1 Like
In general, if @lottemint.md has produced something, it is a candidate for the best. I have immense respect for his work.
1 Like
Sorry for the confusion, guys. 
I had no chance to prepare an icon and demo. 
1 Like
Thanks for the help, you are indeed correct in that there are more problems such as there not being a way I know of to add text to the pile (that swipes), however the plugin linked seems to be a great option. Although, the lack of a animation for snapping back is a deal break in my opinion if there is a way to make the animation more fluid I’d definitely be interested in purchasing it.
Happy to help!
I can say that the experience on mobile is better. I’ll see what we can do, but I’m not making any promises!
Good luck with your app!
1 Like
Hi @eren I have a hard time making the edges round of the tinder Tinderswipe element. When I use the bubble round corners option it is rounding the edges of the tinder cards but not the element itself. Therefor I see some white edges against the background that I want to remove. Do you have an idea? (Really love the plugin btw, one of the coolest on Bubble).
