Dexter
Rank: #1038
144Views
8Comments
Solved
On Mobile: How to remove the two script (clearfix?) tags created by a List?
Question
OutSystems Widgets

Hi,

As you can see in the screenshot an Outsystems list element adds two <script> tags around the list items.
As far as I can deduce this is done to clear-fix the list, which can be done less intrusive.  How can I remove these <script> tags? They interfere with the layout of the children.

Thank you for any help you can offer!

EDIT: It is possible to simply search the elements with Javascript and remove them, but I don't want them to even be generated in the first place. So I am searching for some attribute in Outsystems to prevent that from even happening.

a.png

0
0
on 2018-06-08
Copy link to comment
Afonso Aguas
Rank: #101
Solution

Seems like you want to modify the way Outsystems generates code, I don't think that's possible. You need to make the list code in html yourself if you want to generate it differently.

0
1
on 2018-06-08
Copy link to comment
Dexter
Rank: #1038

Afonso Aguas wrote:

Seems like you want to modify the way Outsystems generates code, I don't think that's possible. You need to make the list code in html yourself if you want to generate it differently.

Thank you for your response!
To bad :(
How would you make the list code in html?


0
0
on 2018-06-09
Copy link to comment
João Melo
mvp_badge
MVP
Rank: #21

I wouldn't do it. This will increase your maintenance cost unnecessarily.

Are you sure you really need to remove this? What is the business impact? Can you share screenshots with the results of having those script tags in your page?

Maybe we can help you finding another way to keep your users happy with your app.

0
0
on 2018-06-09
Copy link to comment
Dexter
Rank: #1038

João Melo wrote:

I wouldn't do it. This will increase your maintenance cost unnecessarily.

Are you sure you really need to remove this? What is the business impact? Can you share screenshots with the results of having those script tags in your page?

Maybe we can help you finding another way to keep your users happy with your app.

Thank you for your response!

Well they need to be removed for the css only styling to work correctly: https://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/.
Based on the children count the width of the children is to be changed. Now however there are two extra children one of which (the first) prevents the css class from working due to the name/identifier of the element being different from the children "I make" (the list items). 

For now it is "solved" by removing the script tags using javascript after the static render of the page. But having to repeat this for every list I encounter this issue with isn't DRY. So it is not really about business impact or having unhappy users, but about the logic within outsytems and the way you need to work within it. 


0
0
on 2018-06-11
Copy link to comment
Afonso Aguas
Rank: #101

Hi Dexter can't you achieve what you want by instead selecting from nth-child(2) to nth-last-child(n+1) ?

1
0
on 2018-06-11
Copy link to comment
Dexter
Rank: #1038

Afonso Aguas wrote:

Hi Dexter can't you achieve what you want by instead selecting from nth-child(2) to nth-last-child(n+1) ?

Hi Afonso! I am sorry I am a bit late responsing. This solution should work too indeed, thanks! However I found that some Lists in my project DO add the script tag and some lists DO NOT. It is quite confusing as to finding out the cause, since the lists seem to be identical. But this would have to be another question on the form. Thank you for your awnser!


0
0
on 2018-06-13
Copy link to comment
João Melo
mvp_badge
MVP
Rank: #21

You can raise a support ticket and ask OS team directly about it.

0
0
on 2018-06-13
Copy link to comment
David Marques
Rank: #518

This is for pagination interactions.

Only need add the attribute disable-virtualization to remove this script tag.

0
0
on 7th Feb
Copy link to comment