How to define a sequence input fields?

It’s because each input is in a different group. You should just have one major group and have the inputs in it, and that’ll work.

3 Likes

Cool. Thanks - that worked well.

we had to put our inputs each one in a separate group so that they move correctly in a responsive design, and it seems that breaks the tab behavior as you advised. Is there any way to define the tab order when inputs are in groups? Having them in separate groups seems the only way to make it render well on the mobile screen.

Hi Levon, Instead of putting your elements into groups to make your elements act correctly in responsive design, you could add dummy elements into your app which will ensure your elements move to your preference.

i just addressed this in another thread, but I’ll paste that comment here so you can see what I mean…
.
.
What I do (as a workaround) is, I put a “dummy” element in the empty space, then have it not visible.
This will ensure that no matter what happens - the element will stay at the same position relative to the size adjustments of the window.

  • The dummy elements must NOT have a max width enabled.
  • I usually set the dummy elements “minimum width” to 0 (zero).
  • Use this technique whenever Bubble won’t align your elements as you would expect.

Here is a link to an app I just made in the forum test App, which I have re-created what I’m talking about…
https://bubble.io/page?type=page&name=dummy_elements_example&id=forumapp3&tab=tabs-1

  • Take note of the hidden dummy buttons listed above the “tools” palette .
  • Be sure to “preview” the app so you can see it working.
1 Like

Many thanks, we did try that before but still couldn’t get the elements align well, but we’ll give another try Thanks!

1 Like

Just an update to my post. So we have solved this issue by placing the inputs above groups (not inside them), so the inputs are overlapping with groups thus they move together in the responsive layout. At the same time because they are not inside the groups clicking the tab takes the user in a correct order from one input to another

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble
Dev.zeroqode.com - Reach out if you need help creating something on Bubble
Private Bubble Lessons by Skype

3 Likes

Nice solution!

I can not get the tab order right, as Emmanuel explained above:


What am I doing wrong?

You need at least one pixel between the lines. See now.

Ahh. Thanks!

@emmanuel, could you extend the input sequence to ignore the fact RG inputs are in a RG, and just evaluate them based on the other groups on the page?

I’m creating a form where users can add as many answers as they want. Doing so using an RG and 2 inputs below the RG. Tabbing between items in the RG and outside of it doesn’t work and it seems anyone trying to use an RG within a form would run into the same problem.

Link to Editor: https://bubble.io/page?type=page&name=workflow_focus2&id=forumapp3&tab=tabs-1

We can’t do this unfortunately, as we process input container by container, and rep groups are one of them.

Okay, thanks for the quick response @emmanuel.

To anyone else who comes across this post, @mishav and @fayewatson figured out that repeating groups treat the sequence differently depending on the Layout Style. Here’s a post with more details.

@emmanuel, how does tab order work when some items are in groups and others are not?

…I’m using groups to show/hide input fields (which must be in groups to show/hide) and can’t seem to get tab order to work as I want. Thanks.

Okay, I created another page and ran a number of experiments. When some input fields are grouped, it’ll skip those ones and eventually tab through them in the order the groups were created (i.e., having nothing to do with the location on the page).

Anyone have any ideas for how to override this behavior?

Javascript after the page has loaded. It will likely need to be re-run any time Bubble makes inputs visible, and untested with repeating groups (which usually have hidden cells) …

Set a specific tab index to a specific field:
$('input[placeholder="field 6"]').attr('tabIndex', 1)

Set all tab index values to zero, the browser will then choose a natural sequence:
$('input').attr('tabIndex', 0)

Could extend this concept to buttons, etc as well.

1 Like

It goes group by group, so yes, it matters

Thanks @mishav. This seems like exactly what I need. Any chance you could share a link to the editor of this page? …I haven’t integrated much JS with Bubble yet so it’d be great to be able to look through your example.

Thanks!
Scott

Nevermind, I’ve got it figured out. Will need a bit of brushing up on my JS syntax to get this to work, but that’s entirely doable. Thanks again @mishav.

Update: Here’s the code I’m using which works perfectly. I’ve set it up to run this code anytime a new input is toggled to display on the page.

jQuery(document).ready(function($) {
$(‘a, input, select, button, textarea’).attr(‘tabindex’,0);
});

Hey Bubblers!
Wanted to share a solution we found, when the default tab order set by Bubble is not working as expected (especially when a repeating group with inputs and auto-binding is used so that the number of inputs is not known from the beginning.

  1. Attach the Jquery library to the app by pasting this code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the settings->seo&metatags->script/metatags in header (see screenshot below)

  1. Insert an html element on a page, make it hidden and insert this code into it:
    <script type="text/javascript">  
    
>          $(function() {
>             var tabFix = function(){
>               // Handler for .ready() called.
>               $("input, select, button").each(function (i) { 
>                 $(this).attr('tabindex', "");
>                 //$(this).css({"border": "red solid 3px"});
>               });
>             }
>             setTimeout(tabFix, 1000);
>             var tabFixInterval = setInterval(tabFix, 200);
>           });
>         </script>

see example

This code resets the default order set by Bubble and does it so every 200 ms, to make sure that all new inputs
that might be added through repeating group will be also reset

Enjoy:slight_smile:

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtwithoutcode.com/ - Collection of apps built on Bubble

11 Likes