I am building one phonegap app for android and iOS devices. Everything is working fine but I have one popup menu with default 100% width. It is covering 100% width on portrait mode but when I change it to landscape mode it randomly applies portrait mode styles to popup and it just covered the past width it had.

How to make sure that with orientation change the style got updated without failing? I am able to reproduce this case in chrome dev tool emulators, android and iOS devices.

The below dom element is created by Kendo. And also styles are generated on the fly.

enter image description here

The below style is generated for portrait mode

enter image description here

And this one is for landscape mode which creates the issue. Its very random and there is no specific pattern for it.

enter image description here

1 Answers

jaydeep marvaniya On

Currently I have found one work around where I am setting 100% height and left:0px to get the desired behavior. Though the issue was that the dom element shared above is generated by kendo and dont have a unique ID so I have used .closest to get these parent elements.

Also kendo popover has open event which helps to set this style.

onFooterOpen: function() {
        $( "#more-option" ).closest( ".k-animation-container" ).css("width","100%");
        $( "#more-option" ).closest( ".km-popup-wrapper" ).css("width","100%");
        $( "#more-option" ).closest( ".k-animation-container" ).css("left","");