Filter + Sort Popup Offset is Insufficient in Droid/Apple

Question

I am experiencing a reported problem with mobile devices with the SfGrid control.When viewing this in Chrome mobile it looks OK: However, when viewing it in Android Chrome it is offset and hidden a bit:

And on IPhone the fields are not seen at all:

Is this a known issue and/or is there a fix for this?Thank you for any guidance/suggestion you can provide,Michael

Mike-E · Accepted Answer

Thank you for your assistance here @Monisha. After some investigation, it appears there is a `width:auto` that is injected into the SfGrid div and that was causing this issue.

It would seem that this would not impact the filter popup, but it appears that it is. Setting this to a CSS rule override of `width: 100% !important` fixes this on my end for now, but wanted to make sure you are aware of this on your end to make sure that the width of the SfGrid should not impact the filter that is displayed in mobile scenarios.

Thank you again for your guidance.

Monisha Saravanan · Answer

Hi Mike,Greetings from Syncfusion support.Before proceeding further with your requirement. We need
some more clarifications at your end. So kindly share below details to validate
the issue further from our side.
 Share us the entire Grid
     code snippet.
 We suspect that the
     issue might be due to the browser width. Kindly check and ensure us
     whether you are facing the same issues even after changing the browser
     width.
 Share us the Nuget
     version used at your end.
 Share us the video
     demonstration of the issue. 
 If possible share us
     simple issue reproducing sample or try to reproduce the reported issue on
     the below attached sample. So that we will validate and we will check the
     reported issue in the provided sample.
The above provided details will be very helpful for us to
validate the reported query at our end and provide the solution as early as
possible also Kindy get back to us if you need further assistanceRegards,Monisha

Mike-E · Answer

Hi Monisha,Your suspicion appears to be correct.  I am able to reproduce this on my Desktop Chrome browser by opening up at different widths.  Here is 557px: 500px: 450px: 400: 350: 300: Additionally, I am noticing the grid does not expand 100% of the width and wonder if this is related to this issue: Now that I can reproduce this I will look further into this and report back here.Thank you for your guidance and patience,Michael

Monisha Saravanan · Answer

Hi Mike,Thanks for the update.Query: “ would seem that this would not impact the
filter popup, but it appears that it is. Setting this to a CSS rule override of
`width: 100% !important` fixes this on my end for now,”We would like to inform you that the Grid will behave based
on the defined width and the popups will be rendered based on the Grid width.
So we suggest you to set Grid width accordingly with respect to the browser
width so that the Grid and popup will be rendered inside the view port.Please get back to us if you still face any difficulties or
if you have further queries.Regards,Monisha