Data grid component responsive design

[fadelsahmarani]

Environment

• Hosting type
  • [x] Local deployment
• Formio.js version: v4.13.0-rc.6
• Frontend framework: JavaScript
• Browser: chrome
• Browser version: latest

Steps to Reproduce

1. Drag and drop a data grid component
2. Add up to 6 7 components inside

Expected behavior

on small screen scroll must be added

Observed behavior

on small screen without scroll

[wag110894]

Hello @fadelsahmarani,

We are not able to replicate this issue on our side. Can you provide a JSFiddle so that we can try and replicate it?

Looking forward to your response.

Thank you!

[fadelsahmarani]

Dear, 600e76906c552bf551b3f2b2 here is sandbox of this issue but you must make your browser to the smallest screen Knowing that grid have more columns like this:

[wag110894]

I am not able to replicate on the sandbox using chrome. Video: https://share.getcloudapp.com/8LukBJoD Version 88.0.4324.96

[fadelsahmarani]

Dear @wag110894 , I appreciate your reply kindly note my fix in the video uploaded Video: https://share.getcloudapp.com/p9u8gkAR .formio-component-dataGrid{ overflow: auto; } but this may affect another inputs inside data grid but that's my try

[wag110894]

Hello @fadelsahmarani,

Great to see you got the issue resolved!

[fadelsahmarani]

Hello @wag110894 , yes but affects the other components like dropdown will be opened under the data grid sandbox: 60118251410ebf2a0c519310

[afirulaf]

Any update on this? Dropdown in datagrid is making the whole datagrid wonky.

[kkaragki]

Is there any update on this at all?? I used the overflow: auto; CSS rule in my DataGrid, but I couldn't get past the issue of the dropdown that will be opened under the DataGrid.

[nazmul-prince]

Choice Js select component will have this overflow issue. If you use HTML 5 select component then the issue should be resolved. But again this is not the solution because there are cases where you might need choice Js select component.

[olgabann]

We're currently addressing a backlog of GitHub issues. Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution!