For a repeating group, how would one create a table row hover effect - say, change the row background color?

Questions
1

For a repeating group, how would one create a table row hover effect - say, change the row background color?

Equivalent css might be something like table.myclass tr td:hover {background: foo}.

And btw - is is possible to add custom css class names to elements that could then be targeted is custom css for the app?

@emmanuel Note: I am coming at bubble from the perspective of a coder, looking for something like the bubble platform to handle a lot of grunt work on hosting/authentication/basic-database and to provide a way to use wysiwyg for initial gui and then selectively customize with code as necessary, all of this for a faster development cycle. I recognize I am at the mercy of the functionality exposed via the bubble designer process, and am trying to root out what things would be easy to code but are hard/hacky using bubble.

2

Place a group within the repeating group cell, then in the conditions of the group select “when this group is hovered” - then from the drop down select the option to change background colour.

1 Like
3

@romanmg has a nice video explaining just that:

2 Likes
4

@brad2 there are a few features you might find useful as a developer.

  1. Add Scripts to Header and Body
    This is available in your app’s Settings–>SEO & Metatags section

    Header-Body-Scripts
    Header-Body-Scripts1303×356 19.9 KB

  2. Add ID’s to pages and elements
    Go to Settings–>General, and check this box:
    Expose-ID
    Then open the property editor for a page (or element), scroll to the bottom, and you’ll see the ability to assign an ID that can be referenced anywhere in your app, as well as–for pages–the ability to add page-specific < head > code.
    11

  3. Plugins
    You can create your own plugins , and be sure to check out the library. There are several that enable some advanced functionality for more technically literate folks, like PlugBubble, CSS Tools, and Toolbox.

Good luck and be sure to share anything cool you come up with back to the community!

2 Likes
5

thx @rico.trevisan looks straightforward. When I do it, the hover color change doesn’t occur if the mouse is over one of the elements in the group - her example is really simple, so didn’t see if she set some special properties of the elements or not to prevent them from interfering with the hover effect.

6

The video is for alternating background colours using modulo. You need to use a “when this ‘element’ is hovered” condition for the colour change on hover over

7

HI @rossliddell it seems she sets it up on hover at the end, and that’s what I did (condition: When This Group is Hovered, set background color to something). The hover works when you hover the part of the group that is not taken up by an element in the group, but does not work when you are one of the elements themselves.

8

thx for the info @djwideman !

The ID thing seems to work and you can control the css from a style element in the header. I noticed that they are are not actually using a table under the hood for this, but apparently absolutely positioned divs (at least in what I saw).

I had hoped the csstools thing would add the ability to add custom class names to elements (maybe like the way you can add ID), but did not seem to.

9

Interesting. Where can a rookie go to learn a bit more about how to use these? Especially stuff with CSS? What are some good resources?

10

Note that the issue here was that I did not have the subelements actually inside the group - once I did that, the hover worked over the whole row as expected.

11