Styles for Mobile

[dcrittenden]

The list boxes are side-by-side, and although I can move "alignActions" to the top this still does not provide enough room for some longer or hyphenated names in the boxes when displayed on mobile devices. Is it possible to provide a responsive option for the boxes to stack when the viewport is less than 500px? Also, if you can provide a way to let the developer manage or take over some of the CSS on the margins that would be helpful when trying to fit the listbox on mobile viewports.

[jakezatecky]

There is definitely a need for this to be more mobile-friendly.

[DleanJeans]

I had to write an in-house mobile version for this, without going into much detail, it simply uses:

- react-window for virtualization in place of <select>
- touch input handling
- flex-direction: column for the parent div
- flex-direction: column-reverse for the available buttons and listbox
- rotate or use different arrow icons
- plus some margin adjustment here and there

[ragepro]

Hello, first congratulations, I just couldn't use it because using it on mobile (cell phone) for example, Galaxy Note S20 it modifies the component, having to select as a select in both columns, making it difficult to use. below the link with the image of the component on the cell phone.

Imagem

[jakezatecky]

Styles added for smaller viewports. The issue @ragepro describes is covered under another issue (#138) and affects Webkit and Chrome mobile devices.