Device Emulation Simulation not working in Version 10

Device Emulation Simulation not working in Version 10

  

Hello

We're using OutSystems version 10.0.604.0

When i resize a window in IE or Chrome the device simulator aka device emulator aka device preview is enabled and visible in bottom right corner. when i click on it it lets me pick from a list that includes things like Desktop, iPad, IPhone 4 etc. 

However no matter what i pick the CSS of the page is not changed like it used to.

There is CSS for a div that looks like this "Page windows ie11 ie en portrait desktop small"

When you change to different devices that CSS is supposed to be changed to e.g. "Page windows ie11 ie en phone portrait"

However in version 10 of the device emulator that's not happening anymore.

Can anyone verify this please?

Thank you.

Fabian

Fabian wrote:

Hello

We're using OutSystems version 10.0.604.0

When i resize a window in IE or Chrome the device simulator aka device emulator aka device preview is enabled and visible in bottom right corner. when i click on it it lets me pick from a list that includes things like Desktop, iPad, IPhone 4 etc. 

However no matter what i pick the CSS of the page is not changed like it used to.

There is CSS for a div that looks like this "Page windows ie11 ie en portrait desktop small"

When you change to different devices that CSS is supposed to be changed to e.g. "Page windows ie11 ie en phone portrait"

However in version 10 of the device emulator that's not happening anymore.

Can anyone verify this please?

Thank you.

Fabian

Hi Fabian.

Did you try to open it in incognito mode? You may have some cookies or cache conflict.

The other thing you can check is if someone changed the site Property ResponsiveOverlay from SilkUIFramework and also if the server mode was changed from development to production.

Let me know if some of these was changed.


Hi Goncalo

I deleted all cookies in Chrome but still not luck.

There is no site property in the SilkUIFramework espace called ResponsiveOverlay

Site property Environment_DevelopmentValue is set to "development"

I'm using SilkUIFramework 2.1.1

OutSystems version is 10.0.604.0

Just be clear the Emulator menu shows up and I can pick from a number of phones in the drop down but it has no affect on the rendering of the page. As I mentioned the CSS is not changed.

Thank you.

Fabian wrote:

Hi Goncalo

I deleted all cookies in Chrome but still not luck.

There is no site property in the SilkUIFramework espace called ResponsiveOverlay

Site property Environment_DevelopmentValue is set to "development"

I'm using SilkUIFramework 2.1.1

OutSystems version is 10.0.604.0

Just be clear the Emulator menu shows up and I can pick from a number of phones in the drop down but it has no affect on the rendering of the page. As I mentioned the CSS is not changed.

Thank you.

Hi Fabian.

As a matter of fact, you do have the site property I mentioned, but not in P10. In P10 it's called ForceSimulationDevice

However, from what you explained, I would say that you have some CSS issues on your theme that is affecting the emulator classes.

Try to check in the browser's console and also on some CSS validator to search for syntax errors or unclosed classes. Be also very careful if you're injecting some CSS classes with some client-side scripts.

Cheers,

GM


Ok I set ForceSimulationDevice to True on our Sandbox environment . Made no difference. 

We are not inserting css using javascript. It's the device emulator that inserts CSS  . The app runs fine on versions 9 and 10. However device emulation only works on 9 but not 10. So something has changed in the version 10 device emulator.

I checked the console and there are no errors. 

Have you tried the device emulator in version 10?

Thank you.

Yes, I've used it without a problem both in P9 and P10.


Solution

Turns out the issue is our version of Silk UI Framework . Our version was 2.1.1. Once we installed version 3.1.7 the device emulation started working.

Solution

Fabian wrote:

Turns out the issue is our version of Silk UI Framework . Our version was 2.1.1. Once we installed version 3.1.7 the device emulation started working.

Nice to know your problem is solved. Tricky one though.

That's why I usually use not the latest version but the one before that until I read the changes made to the latest version and also get some feedback from its usage. Then I test it myself on my personal environment and just after that I upgrade the component on the company's server.


Fabian wrote:

Turns out the issue is our version of Silk UI Framework . Our version was 2.1.1. Once we installed version 3.1.7 the device emulation started working.

I have the same issue with 2.3.2 SilkUI version

Hi Valerij

I think the only fix for you is to install a newer Silk UI Framework version. 3.1.7 fixed the issue for us.