I recently received an email from one of our users stating that the scroll buttons on the tabstrip have stopped working. I have just upgraded to Angular 17 and latest of progress controls so not sure if that is what did it but these buttons have been working since implementation. I am puzzled as to what is now missing and or caused the buttons to stop working. They do display correctly when the screen size changes and not all tabs are on the screen. However, when you click either forward or back, nothing happens.
I anticipate that I will be asked to create a reproduction of this and send it to kendo, but was hoping that someone could take a look at our application to see if something is missing or if it can be determined what is causing the issue? This is a huge application and depends on data to run so it would take quite some time to get it down to something I can send as a repro. See page https://test.tropicos.org/name/25509881.
What makes it worse is that we also have another application that was spawned from the shell the Tropicos app and for the most part uses the same packages. This application also gets updated at the same time as Tropicos as well. This application however is not seeing the same problems with tab strip buttons. See https://test.livingcollections.org/taxon/277173.
If I must spend the time to strip the application down to a page that causes the issue, I can. But, again, this would take quite a bit of time and we are a small development shop so hoping looking at the apps I posted will help to find the issue.
Hi Paul,
Sure, take your time to create an isolated example of the exact issue with the scrollable buttons of the Kendo UI for Angular TabStrip.
Regarding the thread's closure, it is worth noting that all tickets in our support system will automatically close after 7 days of inactivity. However, the customer can always reopen them by sending another response to the thread.
Since you will be sharing some custom source code as a reproduction of the exact issue, I would like to mention that the current thread has been opened in our Feedback Portal and is thus publicly available:
https://feedback.telerik.com/kendo-angular-ui/1656652-tabstrip-scroll-buttons-not-working
This means that the shared source code will not remain confidential if the sample project reproducing the issue is shared in the current thread. In case the source code should remain confidential, please consider opening a private support ticket:
I am looking forward to your reply.
Regards,
Georgi
Progress Telerik
Hello Paul,
Thank you very much for the details provided.
I have thoroughly examined the applications in the provided links and indeed managed to identify the respective TabStrip components where the issue with the scrolling of the scrollable tabs could be observed.
For this reason, after visiting the two applications, I tried to replicate the issue with the scrollable tabs feature of the Kendo UI for Angular TabStrip both in a StackBlitz demo and a clean Angular project both using Angular v17. However, it seems like I am missing out on some of the reproduction steps since the component behaves according to the expectations on my side.
For reference, here is the StackBlitz demo where I performed the testing:
https://stackblitz.com/edit/angular-behyqa
Furthermore, I am also attaching to this response the Angular project where I performed the testing. To run the app:
- Download and unzip the folder.
- Execute npm install.
- Run ng serve.
Having said that, since I am not able to reproduce the issue on my side, I will try to provide some general debugging guidelines that might prove to be useful.
Since the discrepancy with the behavior of the scrollable tabs feature could be observed in only one of the two applications that utilize it, I would ask you to ensure that the project where the issue occurs relies on compatible versions of the Kendo themes and the Kendo components. Based on the thread, it seems that v16.3.0 of the Kendo packages is being used and for this reason, here is the list of compatible theme versions for it:
https://www.telerik.com/kendo-angular-ui/components/changelogs/kendo-angular-ui/#v16.3.0
Another possible reason that might be causing the discrepancy on your side might be some custom CSS that is specifically applied to the component with the malfunctioning scrollable tabs. For this reason, I would ask you to ensure that none of the custom CSS is interfering with the scrollable feature.
Another suggestion that might help with narrowing down the possible root causes would be to render the TabStrip component on a clear page with no other elements and custom styling and see if the issue persists there.
Having said that, I understand that it might be a time- and effort-consuming process to create an isolated reproduction of the same issue with TabStrip component, but if the above-mentioned suggestions do not yield any positive results, this would be the next steps since a runnable project would allow me to gain a better understanding of the exact scenario, reproduce it on my side, debug it, and thus come up with a more suitable suggestion.
I hope the provided information helps you with the debugging process. Please do not hesitate to reach out if any further details are needed.
Regards,
Georgi
Progress Telerik