Mobile Dropdown list wrong position on iOS only

Mobile Dropdown list wrong position on iOS only

  

Hi,
I'm currently facing a really weird issue on a Mobile App we are building with my team.

Some dropdown lists are not positionned under (or above) the dropdown display only on iOS devices. (see attached screenshot)


We have dropdowns on two pages of our App.

  • One page has no issues:
    • There, the dropdowns are simply added as Dropdown widgets in a container.
  • On the second page which has the issue:
    • We have the following structure
      • List group
        • List Item
          • Web block
            • Container
              • Dropdown widget

On the page having the issue, we had no other choice but to use a list with a web block as we need to display a list of questions with dropdown answers coming from the database (and managed through a web backoffice)

There are no specific CSS rules added on those two pages. General CSS styling for the dropdowns have only been edited on color level, not size, margin, position whatsoever.

I've been able to reproduce the native iOS behaviour by using the Chrome Device emulation in the Dev tools. When I inspect the Dropdown List CSS, I can see it is overruled by an Element Style.

These are the elements that are being added by the platform or something related certainly using JavaScript

element.style {

    left: 10px;

    top: 265px;

    width: 300px;

}

If I disable these in the inspector, the dropdown lists are correctly positioned.

Any idea how to solve that? Thanks in advance for your answers.


Hi Gregory,

Element Styles are typically added when you manually specify Attributes or use the Style Editor. Have you double checked this is not the case here?

Hi Killian,

This is indeed something I double checked. No styles or attributes on any of the elements having the issue.

Any other idea?
Thanks

Is it possible to check the HTML code of the page before any JavaScript runs, so to be sure that it's not some JavaScript that modifies the element but it's the Platform that generates the style tag?

Kilian Hekhuis wrote:

Is it possible to check the HTML code of the page before any JavaScript runs, so to be sure that it's not some JavaScript that modifies the element but it's the Platform that generates the style tag?


Hi Killian,

When I block the Javascript using Chrome Disable Javascript dev tool, the HTML page is not loading the content and structure at all. The page is white and when looking at the source code, I only see the JS definitions in the head (script tag) and an empty React container in the body.


So I don't think I will be able to use this trick to make sure it comes from JS or Platform.

I assume this is related to React JS or the way the platform uses the framework to build the lists. In any case, it's not coming from something that our team added.

Hope someone will have a "light bulb" moment to help us further.

Greg

Solution

Hi, I'm having same issue with a dropdown inside the list. It is displayed ok until the page is scrolled - further down scroll greater the offset for the dropdown element becomes and eventually it totally offscreen. In My case it is on the sidebar but adding this styles to the list fixed the problem (at least at dev tools on browser. will check on device asap):

[data-dropdown] > div.dropdown-list{
position: relative;
left: 0px !important;
top: 0px !important;


css is from this thread: 

https://www.outsystems.com/forums/discussion/32777/bug-tablet-theme-sidebar-dropdown/



Solution

Mykola (Nick) Tkachenko wrote:

Hi, I'm having same issue with a dropdown inside the list. It is displayed ok until the page is scrolled - further down scroll greater the offset for the dropdown element becomes and eventually it totally offscreen. In My case it is on the sidebar but adding this styles to the list fixed the problem (at least at dev tools on browser. will check on device asap):

[data-dropdown] > div.dropdown-list{
position: relative;
left: 0px !important;
top: 0px !important;


css is from this thread: 

https://www.outsystems.com/forums/discussion/32777/bug-tablet-theme-sidebar-dropdown/



Hi Mykola,

I had the same issue and I also apply the same CSS it works fine in emulator but not an actual device.

can you try that an let us know if it works?

Thanks,

PP


Hi, it worked on device.