Form tabs no longer working?

Forms
1

I have several published forms that have multiple tabs on them. These have been working fine for years. Suddenly they no longer work - I cannot disable or enable them with javascript or change the formatting. Instead of being able to click on a tab to go to it, all of the tab names just appear as an inactive text string at the top of the form. I see this issue in both Chrome and Edge. With some forms, the preview function still shows the tabs working properly, but in other forms the tabs are not working at all.

2

It looks like setting tab.disabled = false no longer hides the tab. It disables it, but it is still visible.

3

Hi @donald.kantik,

Try this: Tabs — SharePoint forms
Let me know if it helps.

4

This is exactly how I was doing it.

Custom CSS:
fd-form- .tabset .disabled {display: none;}

JavaScript:
fd.container('tab_main').tabs[i].disabled = true;

The JS seems to work - it disables the tab, but the CSS is not working - the tab does not get hidden when it is disabled.

This CSS also used to work to change the color of the active tab:
.fd-form .nav-tabs .active.nav-link {
background-color: yellow !important;
}

But that no longer works. If I use a more explicit CSS, this works:
.fd-form .tabset li:nth-child(0) a.active {
background-color: yellow !important;
}

5

Hi @donald.kantik,

Try adding !important to the display style, like so:

.fd-form .tabset .disabled{
    display: none !important;
}
6

.fd-form- .tabset .disabled {display: none !important;}

does not work, either. When I disable the tab, it still does not get hidden.

7

I had the same issue with hiding the disabled tabs - try the CSS below, it worked for me:

.fd-form .nav-tabs .nav-link.disabled {
display: none !important;
}

1 Like
8

wilsonc,

Thank you for sharing - that solved the problem. I was hoping there would be a relatively easy CSS fix!