setting the tab order of UI components

1
0
-1

Hello,

I am using Bonita for solution that is right to left. That being said, i need to set the tab order my self, or switch the tab order from left to right.

Is this possible?

if yes, please lead me into the right direction.

Thanks

2 answers

1
+1
-1

Hi Mike

I work in the UI-Designer development team.

I don't know if I understood right, but if you want to display your tabs nav from left to right, you need to write some custom CSS code.

I give you an example to do this. You can just add it to a page check what's happening.

/**
* If you want a generic way to update ALL tables in the page
*/
ul.nav-tabs{
    float:right;
}

/**
* If you want an update a specific table in your page
* Put a className (here: move-tabs-to-right) in cssClasses in properties panel
*/
.move-tabs-to-right ul.nav-tabs {
    float:right;
}

You need to understand it's custom code (or a workaround) to do this.

I put here a CSS example to show you how you can display all labels of widgets.

/**
* Additional: Use it to display all text (example for the label in input widget) from right to left
* Be careful: It's a custom behavior, so perhaps, it can be bad displaying some components
*/
.row {
    direction: rtl;
} 

Hope it will help you.

Benjamin

Comments

Submitted by mike_1989256 on Mon, 08/03/2020 - 15:24

Hello Benjamin,

Thank you for your answer, but it isn't quite exactly what i'm looking for. I was able to align the tabs and all the components to the right. what i'm asking for is a way to set the tab key click order (when the user click on the "tab" key on the keyboard in order to go to then next element in the UI)

Al though everything is aligned to the right, the tabs goes from left to right.

Submitted by benjamin.parisel on Mon, 08/03/2020 - 15:54

Hi,

So if you want do that, you can use this following css selector:

ul.nav-tabs > li {
    float:right;
}

Benjamin

1
0
-1

Hi Mike,

if you want your form components to be displayed from right to left, you will have to switch the tab order by dragging and dropping them on the UI whiteboard.

Comments

Submitted by mike_1989256 on Tue, 07/28/2020 - 18:12

Hi,

can you please clarify your answer? Do you mean to drop the right component before the left component? if so, the components are aligned on the right by default. In addition to that, i don't think taking out all the components and then re-inserting them in the UI is a proper solution!

Submitted by dumitru.corini_... on Fri, 07/31/2020 - 09:55

Do you want to switch the order of two tabs? If that is the case, in the UI Designer whiteboard if you click on the tab you should see an arrow next to the name that lets you move the tab before another one.

Submitted by mike_1989256 on Mon, 08/03/2020 - 15:25

not the tab bar items' order, but the tab order of the textboxes when clicking on the tab button on the keyboard

Notifications