Forum Academy Marketplace Showcase Pricing Features

How to define a sequence input fields?

How to define a sequence input fields?

It should just work, if you make sure the elements are aligned and on the same vertical. Can you share a link if it’s not so that we can have a look?

thank you, is working right.

How? How do you define the order to go the way you want it in the same line? Is there a workflow action for that?

What @alucca is asking is if there is a way for us programmers to control the tab order of the fields on the screen. If there are 3 fields aligned on the same vertical order field1, field2, field3, can we control the order of tabbing to be:

Field1, then go to Field3, then go to Field2?

I spoke with @alucca and he just changed the location of the fields to get it to work in the tab order he wanted (he moved Field3 before Field2).

But sometimes, we do want the cursor to go to the right, instead of down, or vice versa, or bypass some fields, etc…

2 Likes

I want a user to add to a list of inputs. How do I make the cursor return to the same Input box as it has just been in?

As a (very rough) workaround:
I first created all the input fields as dummy values (test 1,2,3,…) and then I moved them on the page to match the tab order which is also the order in which they appear on the left hand “Elements” pane. After that I renamed and relabeled them to what I wanted them to say (test 3 = first name, test 2 = last name etc). It seems to me the tab order is in the order that the field is created.

A bit of a pain but works until a “Tab-Order” can be set as a parameter.

Our algorithm looks at the position of each element in the current group and goes from left to right, top to bottom. So if elements are well aligned, it should just work. And grouping elements in a group is a good way to make sure elements follow each others.

2 Likes

Hi Emamanuel - for some reason I am still not getting the tab order you describe above.
The elements are aligned and in groups but I am still getting the reverse Tab order of how they are displayed on screen.
Here is an example: https://bubble.io/page?type=page&name=tab_order_test&id=tab_order_test&tab=tabs-1

Any ideas?

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