(Mobile) "position: fixed" style rule breaks when inside list widget
Discussion

TL;DR: 

- The "position: fixed" style rule doesn't work properly for elements inside a list widget on Mobile apps.

- Removing either or both of the list widget's default classes ("list" or "list-group") appears to fix the issue.

- But the style rules applied to those classes shouldn't (I think) have an effect on the "position: fixed" style rule.


Issue discovered (I think) for Mobile applications.

I have an element with the "position: fixed" style rule applied to it, placed within a web block. If the web block is placed directly in a screen, the fixed element behaves as intended. However, when placed in a list widget, the element is apparently anchored to the list instead of the viewport. Applying "left: 0; right: 0" to the element appears to align it with the list's left and right borders, instead of the left and right edges of the screen.

The issue also seems to apply for dropdown widgets set to "Options Content: Custom." The dropdown list appears more offset to the right than is typical, overflowing off-screen. I assume the different behavior is caused by the dropdown list's CSS styling, but I have no way to be sure.

Experimentation shows that removing either or both of the parent list widget's default classes ("list" or "list-group") solves the issue for both my web block and the dropdown widget, and I think it is caused by either a "position: relative" or "transform: translateZ(0)" rule applied by default to ".list.list-group" elements. By my understanding of CSS rules, however, neither of these should affect fixed position elements, so I'm not sure.

Hi Daniel,

If you want to extend the any CSS property available in Outsystems UI, you just need to get same css class in your team (Module, Screen, block...) and add your property over it. It will work as per your UI designing.

Hope I am able to get your questions.


Dileep

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.