Lock focus group? Or create dropdown with floating group?

You can use html element or place inside of your seo/metags (if paid account) make sure it’s inside of <style"> </style"> tags. I looked at the code for an open group focus and this is it.
image

I’ve not encountered that particular issue, but it seems solvable. Looks like you have a partial solution. If nothing else, a monkey patch using JS might be possible. If nobody comes up with a solution by the end of the week, I can take a closer look on the weekend.

1 Like

In super short

@sudsy is the answer is to return e.stoppropagation on a specific element? Haven’t been able to figure out how.

In long:

Placing a focus group on the page adds this event to anything clickable:

Kazam_screenshot_00099

The multiselect element has this instead:

Kazam_screenshot_00101

But I can’t figure out which function is running and how to stop it… Any help appreciated.

@Taiheta I tried your solution, no dice :sob:

Peek%202019-10-06%2018-42

That’s with the fg having a display:block !important…

@laurence if you want we can send in some bug reports because this is indeed not desired functionality. They may add a fix allowing us to put anything inside a focus group and add that stop propagation by default which would be desired functionality…

1 Like

I had a quick look, and I’m wondering if your idea above might be the better option to pursue. You’d have explicit control over showing and hiding the group, so it should just be a matter of keeping the FG aligned with whatever element you choose.

The following (inside an HTML element) seems to work on my simple page…

<script>
    $(function(){

        var floater = $('#floating_group'),
            align_to = $('#input_element');

        floater.css('margin',0); // reset margins

        $(window).on('resize', function(){
            var position = align_to.offset();
            floater.css({
            	left : position.left,
                top  : position.top + align_to.height()
            });
        });

        $(window).resize(); // init position
    });
</script>

The FG remains aligned to the bottom left corner of an input element. You might encounter some issues on a more complex page, but let us know if/how it works.

1 Like

Thanks @sudsy always so helpful :slight_smile: Where do I buy you that coke? To be honest I don’t feel like doing responsive-aware math to align the focus group as I’m on a bit of a deadline for this and have other things to focus on. I had attempted using this method to align a floating group a while back. Turned out sliding it all over to fit the screen to fit responsively was the sticking point. I can do it, but I’d need to dedicate some more time to it, and was frustrated because that’s what the Group Focus is meant for. Pretty core stuff IMHO.

@marca can you or someone else from the product team write us a quick JS or JQuery patch to stop bubbling (ha) of the hide event on any child of a group focus? I have submitted a bug report, but I’m not currently looking for an empirical or elegant fix just a quick one :wink:

Thanks this is working. My placement is not as simple to bottom left, could you show me how to align (px) the floating group to the target like this:
image

Hmm, yeah, I figured there might be some responsive issues to sort out. While it doesn’t help you for your current project, perhaps the longer term solution would be a Group Focus option to handle show/hide automatically (as it is now) or through an exposed “is visible” property.

EDIT: In fact, a FG and GF are similar enough that it seems they could be combined into a single element with some configuration options related to alignment (relative to viewport or element) and visibility (auto or manual).

So it looks like the top of the FG is equal to the top of the target and its left side is 131 pixels to the left of the target, in which case you might try changing the floater.css() positioning call to…

floater.css({
    left : position.left - 131,
    top  : position.top
});
1 Like

No, you’d need to change the second floater.css() call - i.e. the one inside the “resize” callback. That’s what positions the floater. The first one (which you modified) simply resets the margins.

oops I tried that also, Is this still wrong? :weary:
image

That looks right. The only other thing I did was set the Float vertically relative to setting of the FG to Nothing. If that doesn’t work, then it’s probably just not a robust enough solution, I’m sorry to say. :slightly_frowning_face:

1 Like

@Taiheta, @sudsy,

. . . but what I was hoping for with Bubble is no-code development. :woozy_face:

Yep, agreed. As @duke.severn suggested, a bug report and/or feature request is your best option.

Alternatively, you can post to the freelancer forum to hire a developer to create a plug-in or implement a workable “fix”.

1 Like

@seanhoots the answer from Bubble’s pre-support team and since @laurence requested a fix specifically from your plugin:

Do you know how to prevent event bubbling of the Focus group close event on your plugin?

@laurence it appears bubble won’t touch the issue because it’s a third party plugin. They may or may not fix their own native element (multiselect dropdown) which is breaking on mobile. I’ll check back here when they do.

1 Like

Thanks, Duke.

I have a bunch of other things to focus on this week so I probably won’t get back to this for a while. I want some time to concentrate on trying a variety of elements in a variety of situations.

I’ve been continue to search the forum to a problem I am having with group focus getting shown and maybe somebody in this thread would know the answer to what I thought would have been a simple implementation

If anybody has any ideas it would be much appreciated.

1 Like

Hello,
How did you manage to make the groups tight to the text in the expense category?

I am facing the same problem with Date/Time Droppers. Has anyone found a solution to this ? The focus group closes when the Date/Time Droppers is clicked.

Hi, I created this solution to block a focus group (i.e. prevent it from closing when clicking on another object or page)

Basically I use the event “Do it every 5 seconds” with the condition in which the user makes visible the object, if it is for a floating dropdown customize (it could be activated through a state) and it is for a shopping cart could be with a scroll position, etc.

image

Then basically the workflow should be to show this focus group with an interval of 0 seconds, so that it does not disappear, and then when the user does what he has to do, hide it, in case of the dropdown change the state of the state, in case of a cart when he makes the purchase, etc.

I hope it has served

2 Likes

Mate, you have made my day, week and may be a year. I was playing around for a long to come up with a custom dropdown that works! Together with the custom state which i set to Yes/No it works suoper smoothly! Great solution! Thanks a lot!