Mobile Structure Visual Problem on Some Device

Hi all, 

I have a visual problem on mobile where used structure. On my Android and IOS device structure not looks as my options. I tried all selections but it didn't change anything. I think cause of the problem about structure. BTW Its working fine on Chrome emulator, my IOS Tablet device (version 13.1.3) and Iphone X.

(Sorry for more pictures)

Environment version : Version 10.0.1016.0 

Android Device   =>  Version 9 / T510XXS2ASK1



IOS Device => Version 12.4

Chrome Emulator (Should be looks this)



Service Studio  (All column properties are default)


Erdem Birinci wrote:

Hi all, 

I have a visual problem on mobile where used structure. On my Android and IOS device structure not looks as my options. I tried all selections but it didn't change anything. I think cause of the problem about structure. BTW Its working fine on Chrome emulator, my IOS Tablet device (version 13.1.3) and Iphone X.

(Sorry for more pictures)

Environment version : Version 10.0.1016.0 

Android Device   =>  Version 9 / T510XXS2ASK1



IOS Device => Version 12.4

Chrome Emulator (Should be looks this)



Service Studio  (All column properties are default)


Hi,


I think the problem is the size of screen. You can try with another android device?


Cheers


Hi Mari,

Thanks for advice but I have no other android device. But i tested a lot of ios device to have different size. They are working fine.

Erdem Birinci wrote:

Hi Mari,

Thanks for advice but I have no other android device. But i tested a lot of ios device to have different size. They are working fine.


I think the problem is any configuration in android configuration. 

Solution

Hi All,
Support provided to us solution and we fixed. I m sharing solution in below.



In order to get past the issue, we would like to suggest to you the following workaround for the situation:


  • On your application, in the Logic tab create an "On Application Render" event:
    • Right-click the "client actions" and select "Add System Event" > "On Application Ready".
  • Once this event has been created, open it and drag a "Javascript" widget into the action;
  • Inside the javascript action, place the following code:
    • window.addEventListener("orientationchange", function() {
          setTimeout(function(){
       
              var osType;
       
              if(window.cordova){
                  osType = window.cordova.platformId || "desktop";
              }
       
              document.body.classList.remove("phone", "tablet", "landscape", "portrait", "ios", "android");
       
              viewPortWidth = window.innerWidth || document.documentElement.clientWidth;
              viewPortHeight = window.innerHeight || document.documentElement.clientHeight;
       
              if(viewPortWidth < 768){
                  document.body.classList.add("phone");
              } else {
                  document.body.classList.add("tablet");
              }
       
              if(viewPortWidth > viewPortHeight){
                  document.body.classList.add("landscape");
              } else {
                  document.body.classList.add("portrait");
              }
       
              if(osType === "ios"){
                  document.body.classList.add("ios");
              } else if(osType === "android"){
                  document.body.classList.add("android");
              } else {
                  //Is desktop
              }
       
          },500);
      });
  • After this please add the following JavaScript to the "onInitialize" action of the "layout" block.: 

    var osType;
    if(window.cordova){
        osType = window.cordova.platformId || "desktop";
    }
    document.body.classList.remove("phone", "tablet", "landscape", "portrait", "ios", "android");
    viewPortWidth = window.innerWidth || document.documentElement.clientWidth;
    viewPortHeight = window.innerHeight || document.documentElement.clientHeight;
    if(viewPortWidth < 768){
        document.body.classList.add("phone");
    } else {
        document.body.classList.add("tablet");
    }
    if(viewPortWidth > viewPortHeight){
        document.body.classList.add("landscape");
    } else {
        document.body.classList.add("portrait");
    }
    if(osType === "ios"){
        document.body.classList.add("ios");
    } else if(osType === "android"){
        document.body.classList.add("android");
    } else {
        //Is desktop
    }

    On the "Common" flow you should be able to find the web block named "layout".
    To apply it follow the next steps:

    1. Create a new client action on that web block and name it "onInitialize";
    2. Inside of this new action create a JavaScript and paste the one previously shared;
    3. Finally, clicking the web block will show you its properties and in there, an empty field named "onInitialize". Click it and select the newly-created action. 

After this, please publish the application and regenerate it.


Joana Ferreira | Global Support


Solution