Why does OutSystems append empty script tags at the start and end of list widgets?
Also, it injects inline style to list elements at run time, why is that?
While working on a project, I did notice that the custom timeline I created had an issue that the first element sometimes disappears. While the list fills that empty space (img "List Tag.png").
After using browser inspector tool, I noticed that the "script tag" at the start fills the empty space (img "Script Tag (start).png") left by the hidden element which happens to have inline style displaying it outside of the screen (img "Element #1 (with style).png").
I solved this issue by applying style on list elements and script tags through my style sheet, to make sure that the script tags are always hidden, and the elements are displayed inline.
But I want to know why this behavior happens.
Hello Mustafa,
This is based on my understanding of the platform: under the hood, OutSystems applications run as single-page apps, similar to frameworks like Angular or React (to be precise, React). The use of inline styles and empty tags in the DOM serves as a system of placeholders, allowing the platform to react quickly to changes without reloading the entire page. Without these mechanisms, every update would require a full page reload along with all scripts and CSS files. OutSystems designed this behavior intentionally to enhance performance and deliver faster, smoother user experiences.
@Sherif El-Habibi thanks for sharing this info.
You’re very welcome any time.
hi @Mustafa Emad Shaker
You can need hide this script tag then you can add this attribute:
disable-virtualization=True.
Check this link for your reference:
https://success.outsystems.com/documentation/11/reference/outsystems_language/interfaces/designing_screens/list/
I hope this helps
Thanks
@Rupesh Patil thanks for sharing this info.
I'm getting the exact same issue. Injects inline styling on the first element and never removes it. In my case is even worse because the element is visible, but is floating on the screen
You can apply css style form your style sheet, to override the inline style.
I usually adds a parent class to the list widget, or a class for the list element.
You can send me the run-time injected inline style, and I can give you the fix, if you want.
what you are showing here in your images is all classes, not inline styles. A.f.a.i.k., you can't override inline styles in CSS.
@Dorine Boudry what I understanded form (João) comment, is he had the same issue as this one (see image below):
What I meant is to add a selector class, to apply a new style for the element affected, to make sure it always appears in its right position.
In this example, the fix would be:
.seec-timeline .list.list-group > div { position: initial !important;}
Or as for the case in the reply screenshot:
.list.list-group.my-class > div { position: initial !important;}
.list.list-group .my-element-class { position: initial !important;}
I am not saying it is a perfect solution, that is why I asked the question in the first place.
ok, I see now. the !important
@Mustafa Emad Shaker ,
1°
What version of OutSystems UI are you using ? I'm trying to recreate your problem on version 2.24.0, and there is not TimeLine widget, only a TimeLineItem
2°
If I just have a list with timelineitem inside, vanilla, without writing any of my own css or styling, then what you describe doesn't happen
So maybe this is all caused by the combination of the TimeLine together with the list widget ? Each of them trying to add some magic to their first element and confusing each other.
Or maybe there is some inline styling added by a developer after all (much less likely)
Dorine
I am not sure what caused the issue, but I am using OutSystemsUI 2.13.0.
And regarding the timeline widget, I am using a custom made one. However, my timeline widget does not inject any inline styles, it is just a wrapper for some divs that defines a layout for the content.
ok, what caused it is what we are trying to find here.
That Timeline didn't look custom at first glance : it has the class OSBlockWidget and the property Navigation.Timeline. Where does that come from ?
It is hard for us to help if we can't see exactly what you are doing. Trying the same doesn't create the same problem, so can you share a small demo oml where this problem occurs ?
Maybe start from scratch, first just add a few timeline elements in a list without anything custom, and see what happens. Then start adding all your custom stuff until you see the problem appear. This will give much more information on where to look.
My custom timeline contains OSBlockWidget class, because I made a reusable web-block, with the intent to use it based on the scenario it is needed in.
As for the Navigation.Timeline, it is because I followed the same structure used by OutSystems in my common utilities module, a module I made for widgets like this.
oke, that was not obvious. If you share an oml that has the problem, we can take a closer look.
@Dorine Boudry you can find the custom timeline in the file attached.
not showing any problem at first glance
I am not sure why I did encounter this scenario, and why it did not happen on your environment. But it was not an issue that I needed to fix, rather I was wondering why this behavior happens, and I think @Sherif El-Habibi has the most logical answer.
Anyway, thanks a lot @Dorine Boudry for your time and effort.