Hi community,
Within my application I do have dynamic tabs working with a list. When there are multiple items in the list, the alignment is correct. When there are less items in the list, the alignment seems to be centered. I already tried disable virutalization on the lists but this is breaking my tabs. They are not clickable anymore. Does anyone know how to solve this problem? If more information is needed, please let me know!
Best regards,Bart
Hi @Bart Nooijens
What I was able to find was:
Hope it helps.
GM
Hi @Bart Nooijens ,
I have also tried taking your oml, removing all broken dependencies, and then use that tab, it is clickable even for one single item.
This is a test application you shared, right ? And if you run this one, it is not working for 1 item ? I think the best you can do is start stripping away things until it starts working :
- use outsytems ui as base theme
- don't use the UtilitiesExtended\HTMLToText as content
- don't even use data from database but just put some appends in for testing
it must be one of these things that you have in there and we had to strip out, that is causing this.
I'm attaching a stripped down version of your oml, maybe start by seeing if this one also works in your environment, then start adding stuff like the theme and the real data etc etc until it stops working...
Dorine
Hi @Gonçalo Martins and @Dorine Boudry,
Thanks for replying!
I created another .oml where the problem is occuring (atleast at my side :-P). I removed everything that could interfere. Items in the tabs are not clickable at my side.
Best,
Bart
I don't have an environment with version 2.7.1 of OutSystems UI, but with the latest, I still can't see any issue and the Tabs are clickable. Probably this was something already fixed on another version of OutSystems UI since yours is old.Try to take a look at the release notes here.
Hi @Gonçalo Martins @Dorine Boudry,
I did read the release notes and I can't seem to find a issue related to this. But I can see that there are a lot of improvements done in later versions.
So, conclusion. Update OutSystems UI as it solves the problem :-). I will mark both of your solutions as an answer since they both helped to solve the problem.
Can you share the OML?
Hi @Bart Nooijens,
To help we need to see your implementation since the default styling is not that one and probably some CSS is being inherited from a parent element.
Cheers,GM
Hi both,
It is correct that I have some custom css, but I did create a example of my problem in a new reactive module. I do have 2 items on the example list and you can see it is centered.
https://bart-nooijens.outsystemscloud.com/DynamicTabs/
UPDATE: I did make the example with an old version of the tabs. I re-uploaded the tabs with the newest one. Also, the OutSystems UI version does not matter. Same problem in both versions. In my personal enviroment I do have version 2.14.0 and on my current environment I do have 2.7.1
The only difference I notice is that it works in my personal environment when I turn on disable virtualization. In my other environment, this causes the tabs to become unclickable. I do have a JavaScript error in the console.
@Bart Nooijens have you tried to enclose the Tabs component on an If looking at the IsDataFetched property from your server call to make sure all data was fetched to properly create the Tab object?
Also, on the link you shared, I can't see it centred, maybe I'm getting something wrong from your post. Can you clarify?
Thank you
@Gonçalo Martins Sorry, i forgot to mention that I already did that (see screenshot below)!
Also, about the centering. That is correct. I am still trying to figure out what is causing this. Therefor it could be possible that the link is updated with my findings. You are now seeing the outcome of adding disable virtualization. As I already mentioned. This is working on my personal environment. I also did create a new reactive application on my current environment and created the same sample. It is also working! So the problem is on my current page. Unfortunately I am not able to share that screen and rebuilding it in a sample .oml will be too much work. Maybe there is something on the page that is causing the tabs to not work properly anymore. I am still not sure.
No worries @Bart Nooijens :)
Having the disable-virtualization = True is mandatory for Tabs to properly work when used inside lists. If you could isolate that issue on an oml I could try to take a look since I'm not being able to reproduce the issue you mentioned about not having the tabs clickable.Do you have any CSS, javascript or any other business logic that can impact the component's lifecycle? Because this seems a scenario like those, not an issue on Tabs itself.
Hi @Gonçalo Martins,
I am not able to isolate the issue since I can't reproduce it. So it must be something on my current screen. I also have other tabs on the screen that are not dynamic. They both have the same CSS but as you can see in the screenshot below, the outcome is different. First tabs you see is the dynamic one. The second is the static one.
I'm thinking about how can I try to help. Could you clean up the business logic that might be sensitive and share an oml with that screen?On both, are you setting on the lists disable-virtualization = True and tried to enclose on an IF statement looking at the IsDataFetched property from the data source bound to those lists? Do you have any custom Javascript or CSS? You could try to remove all your custom CSS just to troubleshoot.Sorry about all questions but without having the oml is just a guessing game.
I have isolated the logic, but I think it will not be working on your side to test in the browser. But atleast you can now see the logic I am using. Hope this helps a bit?
Thanks for looking into the problem. I did remove the container and re-added the disable virtualization. The alignment is correct after that but the problem of not clickable tabs still persists.
When the list only consists of 1 or 2 items you can see it behaves weird. The active tab does not seem to be set and I do not see the content on the screen.
However, the content is in the DOM. But since it is not registering the open tab correctly, the content is not displayed.
When there are multiple items on the list, you can see that it is working as intented. The active tab is set and the content is shown correctly.
Any ideas what may be causing this problem? There is no JS errors in the console.
@Bart Nooijens have you tried to remove your CSS?
I tried with 1 and 2 elements on the list and it works as expected:
Thanks for you reaction once again! To make sure no CSS was interfering with this I did remove every custom CSS line in my _th module. This has no effect. In the end user application itself I have no custom CSS rules.
Not sure on what is going wrong on this one. I am also still wondering why it is working when there are 3+ items in the list and everything below that is giving this not clickable tabs.
By looking at the code and the event listeners using Dev Tools can you try to understand what is blocking the click? An event or some CSS with point-event, for instance?