Not responsive on mobile

Hi,

So I am just about to complete my proof of concept, developing on my laptop, and decided to test on iPad. I found several critical problems with the controls and am seeking for advice on how these could be fixed.

Many controls (drop-down, dropdown with datagrid, listbox , slider etc) don't react to a "click" event -- the list of the drop down would come out, but there is no way to select an item. In a datagrid, the "RowSelect" event (to update the item) does not fire . All of these are working fine on my laptop and on my iPhone though.

The situation is the same with the Radzen demo website, so this would not be a local issue. I've tested two iPads with the same results.

Anybody experience this, any advice on how to fix this?

Thanks,

ma

1 Like

If the demos are working on your iPhone but not on your iPad the problem in my opinion is different. Any more info about iPad versions?

Yeah, it is ipad mini2 (2012). Will definitively try to grab a more recent model to test.

Tks.

I had issues on an older iPad as well with Radzen controls. The issue was the iPad was on an older version of iOS. I think v12. I upgraded the iPad OS to the latest version and that resolved my issue.

1 Like

You are probably right. Not working on my old iPad with IOS 12.xx but is ok on another device with IOS 13.xx.

I guess I need to run to Apple store :slight_smile:

tks.

We are having this issue as well - unfortunately our users are not tech saavy and use this app once a year - so having them upgrade their iOS is not an acceptable workaround. Is this being investigated and prioritized?

We have found any device with iOS 12 and under will have this issue in Chrome and Safari. It happens sometimes with iOS 13 using Safari, and when that is the case it requires using Chrome.

Update to clarify:

https://blazor.radzen.com/dropdown
Using BrowserStack with any iOS 12 or under device (in this case iPhone XS), the drop down list is not letting you select an element.

You can find more info about this ios issue here. One of the workarounds (using cursor: pointer for the clickable elements) seems to work for the dropdown.

 .ui-dropdown-item {
   cursor: pointer !important;
}

Thank you! I will give this a shot and see if it clears it up!

I wanted to follow up and add that this did fix the issue! There was a related issue that the drop-down doesn't align itself correctly in Safari if the dropdown is in a modal popup and the page is scrolled down at all - so we had to add some javascript that scrolls to the top of the page to get this working correctly.