Forum Documentation Showcase Pricing Learn more

[WORKING] Swipe/drag left to reveal buttons (Fully Responsive)


#1

UPDATE: The two limitations mentioned previously have been now removed and this feature functions exactly as you would expect.

You will find a fully responsive version of an iOS Style swipe left to expose button(s) at the editor here https://bubble.is/page?type=page&name=index&id=swipe-to-del&tab=tabs-1and the live version here https://swipe-to-del.bubbleapps.io/version-test?debug_mode=true

48

Implementation: When building for yourself please note the following things which may not be obvious but which are critical.

  1. Position a Text of width 1 and height zero, not visible on page load, in the top left corner of the top cell. This is used a fixed origin point to enable correct movement left/right of the cell’s displayed contents.
  2. Make the two DropAreas, left and right, equal to half the width of your full-size page and position them to the furthest left and right positions.
  3. Ensure the drag/drop group that contains the cells’ displayed content has ‘Disable the ability to drag’ checked.
  4. Ensure the second drag/drop area, which is the one that is swiped left/right, has ‘Constrain the movement within the parent’ and the ‘Make this element droppable’ checked. Make its width a bit shorter than the width of your page and ensure it is in FRONT of all the elements mentioned in steps 1, 2 and 3 above.
  5. Finally, in FRONT of every other element position your Delete, or other buttons, to the far right.
  6. Install ZeroQode’s free CSS Tools plugin and set up a Page is Loaded workflow to put CSS into the header as per this example - it hides horizontal and vertical scrollbars.

HACK When experimenting I discovered a really useful hack. If the button to detect tapping a cell is wide then it is impossible to differentiate between a button tap and swipe/drag so both workflows are triggered. However, if the button is small then Bubble can differentiate. I choose to use an RG with multiple, in this case, 12, small buttons because it means I only have to make a single workflow and it runs for all buttons. The alternative would be 10 or 12 buttons each with their own workflow, all identical to each other.

I believe this feature could be enhanced with ZeroQode’s Touch and Mouse Event’s Detection to differentiate taps from tap and hold but I haven’t had the time to experiment with that yet.


Native/mobile repeating group item swipe/slide capability
#2

Good work :slight_smile:


#3

@gaby @levon @vincent56 @NigelG @davidb2, and any other experienced bubblers that I’ve not yet engaged with, can any of your find a way to overcome the two limitations mentioned on this fully working iOS style swipe?

I’ve posted it to help other beginners so a little input from experts might help me make it better for everyone.


#4

I think Zeroqode just released a plugin for this.


#5

Thanks @andrew_bpco but I’ve reached the point where I am fed up paying $x here and $y there and $z somewhere else every month. It makes apps for small local businesses expensive and eats my profit margin so I want to do as much as I can with bubble.

However, I’d be keen to find a link to that plugin, I’ve looked but their website is so slow it is painful and the plugin search appears not to be working … maybe they’ve got an issue with the new bubble update.


#6

I can’t help with the expense part, that’s unfortunately just part of software development. The costs of running on Bubble are significantly lower than rolling it yourself in code.

Anyway, here’s the link to the Zeroqode plugin: https://zeroqode.com/plugin/swipe-to-workflow-action-1531752584544x288312056348672000


#7

Thanks for that @andrew_bpco It looks interesting but I think I have all I need at the moment. I may however have to revist it soon as I work through the desired app featues.

I know about code expense - 30 years of it. But, I also work with a lot of local businesses and trying to keep the costs affordable is key. I love the way AirDev made thier Best Praactie Guidelines and their Canvas app available free yesterday. Like them, I’m hoping sharing something free will help others.


#8

@Bubbleboy - I got the swipe working and have made it available to others here. Thanks for your help.


#9

A new enhanced version of Swipe to reveal buttons available at the links in the post above.


iOS Style List/RG Drag to Delete [WORKING ... ALMOST]
#10

This is how I see it from Internet Explorer. Is the hiding of the scroll bars not working?


#11

Apologies for the delay @J805 - I’ve been very unwell.

The truth is that I don’t know what the swipe would look like on IE because I don’t have access to a windows machine. I do know that I got the code to hide scrollbars from another post on this forum and it uses webkit. I am aware that webkit does not work with FireFox but it looks like it might also not work for MS’s IE and Edge. I’m not a developer so I don’t know a way around this but from what I have read, it is far from simple.

The only two options are that bubble provide an attribute in the element inspector to allow us to hide scrollbars or someone builds a plugin. I have asked @levon in ZeroQode about the possibility and he has it on their list. Perhaps adding your voice as an interested party might help it up the list.


#12

No problem, I am sorry you haven’t been well. I hope you will be getting better soon. No worries. I wonder if this would work:

Maybe @levon can verify that this could do what we are looking for.


#13

I saw that @J805 and did plan to change over because it gives better functionality but that is not the cause of the problem. The scrollbars arise because the bubble repeating group insists on displaying them. What I might do tomorrow is to experiment and see if making the width of the RG smaller might help. I’ll let you know when I do it then you can test on IE and let me know what you are seeing.


#14

No problem, I am curious to know if it will help. Not sure what is causing it. I hope one day to get swipe working on my app hopefully with not much of a cost. I wish bubble would integrate this type of functionality within bubble and not just a plugin that will cost money.


#15

Apologies again @J805 , I had a bit of relapse in my recovery (trying to do too much too soon). I got a chance to look at the problem today and discovered that the checkbox to make the page fixed width was ticked which it should not be. I unchecked it and that appears to fix the problem.


#16

Hmm, I still see the scroll bars, not sure why. Hope you feel better soon.


#17

@J805 I just tried decreasing the width of the Repeating Group so it is smaller than the page width. See if that helps. The scroll bars indicate the RG is being forced to scroll horizontally to view information so I’m guessing that was what was causing the problem. If not it may just be an IE issue … seems there are lots of browser incompatibilities.

If you get a chance would you please take a look at https://swipe-to-del.bubbleapps.io/version-test/card_tab_swipe_both and tell me if you can scroll the card (below) and the tabs (above) or click a tab and if it all happens without scrollbars.


#18

This is what I see:


#19

Thanks, @j805 but did you get a chance to check if the original one worked since I changed it? It if did then I can do the same to this second one.


#20

Looks like it improved things on the sides. Still looks like this though.