A (maybe for you) neato way to let your users select a row

[firstfifteensoftware]

A while ago, someone asked how to get this look in a repeating group:

I always liked that look, and I was trying to figure out a useful way to implement it in my app.

So I added this into my app. Now my users can “scroll” through a select list of sales quickly and easily. Clicking on the photo automatically brings them to the page where they can edit the sale.

For some, this may be dumb overkill, but I got several people who kind of like it.

EDIT: the gif did a horrible job of showing the transitions; in real life they are a LOT smoother.

[georgecollier]

Go on, spill the CSS-ecret!

[firstfifteensoftware]

Actually, it’s all just basic Bubble stuff.

There’s a lot little details, but it’s all pretty simple.

Start off with a RG and place an image in it, associating it to the row’s image you want to display. My RG shows only the first 10 rows.

The magic is image’s code.

Set this on the image’s “Appearance” tab:

On the Layout tab:

On the Conditionals tab:

The RG’s appearance is pretty straightforward, but here it is anyway.

Appearance:

Layout:

I think…that’s all you need!

That whole thing gets placed (for me anyway) in a floating group, but I guess you could place this virtually anywhere in anything.

Let me know if you want screen shots for how the text below the image is handled. It’s very similar to how the image is handled.

[sudsy]

Nice job, @firstfifteensoftware. Some nifty UI effects are possible with Bubble transitions. Reminds me a bit of the macOS dock magnification effect.

I’m curious, though, how does it work on mobile?

[firstfifteensoftware]

I don’t think it would work on a mobile device.

But I also haven’t worked on that part yet, either.