On Mobile: How to remove the two script (clearfix?) tags created by a List?

On Mobile: How to remove the two script (clearfix?) tags created by a List?

  

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.

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.

Solution

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?


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.

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: http://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. 


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

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!


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