make kendo popup window to be maximized in chrome/android

[Monica]

Hi,

I am trying to open a maximize grid/edit popup in chrome in an android phone, and if the status bar is visible, and the user opens the popup, the popup maximizes OK, but if the user scrolls down, the status bar disappears, and now we open the popup,  the popup.maximize does not cover all the available area.

edit: (e) => {

                    //edit window
                    this.myEditPopupWindow = e.container.data("kendoWindow");
                    if (this.myEditPopupWindow) {
			this.myEditPopupWindow.maximize();
		    }
}

I have tried setting the height/size of the popup manually to different settings , but the popup still does not fit the the available space

   edit: (e) => {

                    //edit window
                    this.myEditPopupWindow = e.container.data("kendoWindow");

                    //var h= $(document).height();
                    //var w = $(document).width();

                    //var w = window.innerWidth;
                    //var h = window.innerHeight;

                    var h = window.screen.height;
                    var w = window.screen.width;

                    if (this.myEditPopupWindow) {
                            this.myEditPopupWindow.setOptions({ width: w, height: h });
                            this.myEditPopupWindow.center();
		    }
}

 

Any idea how can this be achieved?

Thanks

[Martin]

Hello, Monica,

Could you let me know if the issue can be observed in this Dojo example? If yes, kindly share the steps so that I can reproduce it too. If not, please modify the example as needed.

[Monica]

Hi,

I have modified your example in order to reproduce http://dojo.telerik.com/UhilaYOP

and I have included two screenshot of running that dojo in my android mobile:

1. status bar hidden, popup not taking all available space

2. status bar visible, popup takes all available space

Many thanks

 

 

 

[Martin]

I tested the provided Dojo, but the Window takes all the available space on my mobile. Could you please elaborate what you mean by "status bar hidden" and how to achieve it? 

[Monica]

Thanks Martin, sorry for the confusion. Please see the attached screen shots.

1. I have highlighted what I meant for status bar (1_status_bar_visible.jpg)

2. Now please, scroll down until the browser hides the status bar (2_status_bar_no_visible.jpg)

3. Now click on the edit button. I have used some arrows to point out the area on the screen that the pop up is not covering (3_popup.jpg)

 

[Martin]

Thank you for the additional explanation, but I was still unable to observe the issue. A colleague of mine also tested and the result was as expected. Maybe the key is in the status bar which doesn't hide on my mobile when scrolling, it remains at the top of the screen.

[Monica]

Hi,

I have modified the dojo slightly just to make sure that the scrolling is done on the page, not the kendo grid.

new updated dojo

Could you please scroll all the way down to the page, until you read the "Bottom of the page" and then try opening the popup?

May I ask what brand/android version are you running? We have tested with 3 different manufactures (Samsung, Google Pixel and Xiaomi) all running android version 12 and they all display the same issue.

Please note that the tests need to be conducted on a real android phone. Google developer device mobile simulation tool does NOT hide the address bar, so that you cannot replicate the problem there. However real mobile phones will hide the address bar when scrolling.  I believe that the hiding of the "address/url bar" on a mobile is the default behavior (sorry for the previous confusion when I refer to this bar as status)

Thanks

[Martin]

Hi, Monika,

Thank you for the additional details. My device was a Huawei P20 with Android 10, probably that was why I couldn't observe the issue until now. We managed to reproduce on Android 12. I have logged a new Bug Report in our Feedback Portal where you can track its status. I have also updated your Telerik Points for reporting the bug to us. 

[Monica]

Great, thanks. Is there any work around until the bug is fixed?

[Martin]

Currently there is no workaround I could offer. As it is only reproduceable on specific devices, it is hard to suggest an approach. I guess you can try setting the height:100% when opening the Window.

[Matthew]

This is also happening on my iPhone 11 , it would be great if this could be fixed because it leaves a gap at the bottom of the screen where the URL bar appears

[Martin]

Hi, I have raised the bug's priority a bit so that it will move up in our queue.

[Monica]

Bug

 

https://feedback.telerik.com/kendo-jquery-ui/1584653-the-grid-edit-window-does-not-take-all-the-space-when-maximized-on-mobile-device