search

jakezatecky / react-dual-listbox

A feature-rich dual listbox for React.
https://jakezatecky.github.io/react-dual-listbox/
MIT License
110 stars 58 forks source link

Styles for Mobile #146

Closed dcrittenden closed 1 year ago

dcrittenden commented 3 years ago

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 commented 3 years ago

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

DleanJeans commented 3 years ago

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 commented 2 years ago

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 commented 1 year ago

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