BS4 - Navs - Change active tab

#1

Hey,
Does anyone have a code sample on how to change the active(selected) tab during runtime using BS4-Navs? Kind of looks bad when a user selects a tab and it’s not highlighted or selected. (sample project does not show how).

Thanks,
Rob

#2

I see what you mean. We’ll update the sample and report back.

1 Like
#3

We just uploaded 7.4.0.6 which fixes the logic on Bootstrap 4 Navs. Clicking on a tab now highlights properly.

Thanks for spotting this!

1 Like
#4

Hi,
I just tried the new version and the sample. here’s the behaviour I see:
Base Navs: not visible which item has been selected. Text of all active items is blue, disabled items grey.
Tab Style: the tab now shows the selected item. but I find the text color selection odd: the text of the non selected item is blue. The text of the selected item gets set to black/grey, same as the disabled item. or is it black and grey? if there is a difference, it’s hard to see. I find this non-intuitive, but maybe that’s as it should be?
Pill Style: selected item has a blue background, and text color is changed to white - nice.
Tested locally in Safari on Mac, and via Volt on iPad.
Thomas

#5

Yes, this is the expected behaviour:

#6

Yesterday I modified an app, with 4 navs on 4 forms

appstudio7406navs
appstudio7406navs.jpg542×963 79.6 KB
working as expected. Each nav with 4 items as pills. The current item of each nav was highlighted.

With 7.4.0.6, today, the navs work as expected too, but only with the first use of the navs. Afterwards, when I click pill “Seite 2” being at “Seite 2”, “Seite 3” becomes highlighted and so on, i.e. click 2 highlights 3, click 3 highlights 4.

See attached screenshot.

Bernd

#7

Updating I did not get 7.4.0.6. Update is 7.4.0.5. Tried 3 times.

#8

The installer was updated, but the version number was not. We’ll upload a fresh build in a few minutes.

Can your issue be reproduced in the sample?

#9

Also, are you setting Navs.value yourself?

#10

Hi Bernd,
The numbering of the items internally starts with 0 - not with 1. Did you take that into account?
thomas

#11

Thank you. Definitely: yes.

#12

@Leader: Not by own code. I use the project item property. Meanwhile I learned that the navs pills or tabs are highlighted correctly with a second click when I double click or use two clicks.
The sample is OK. One difference is that my clicks trigger change of forms.

#13

@Leader
I see. Solved. Needed to write code like this:

if (choicenav===2) {
    ChangeForm(Form3);
    NavsS3.value = "2";
    };

Update:
The Bootstrap 4 navs control did not work with iOS, at least not with my iPad Air. Recalling that one should not use a BS control when you do not really need it, because it can be done easily without BS, I deleted the navs controls in my app and replaced the navs bar with 4 buttons. This is done easily, less complicated than navigating via navs and this is working on iOS/iPad as well.