Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consider the space usage for forms in small spaces #655

Open
NightJar opened this issue Sep 19, 2018 · 3 comments
Open

Consider the space usage for forms in small spaces #655

NightJar opened this issue Sep 19, 2018 · 3 comments

Comments

@NightJar
Copy link
Contributor

During demonstration of a new feature for https://github.com/dnadesign/silverstripe-elemental @chillu and @be2n pointed out that the form fields look a little cramped in small spaces.

It was talked about how these are default styles inherited from the CMS as a whole, and are a sort of run on from being implemented via media queries - which are relative to a the viewport size, rather than the size of the containing element.

However as we move towards an entirely React run interface, the component react-resize-aware is a good solution we've discovered with @raissanorth working on #560, and this should be an entirely possible solution now.

e.g.

image

vs

image

The context here being "Inline Editing" with Elemental.

Making a change to allow forms to adjust their layout according to their containing element's size would be much more ideal as we move towards forms hosting other forms, or even just interactive components in smaller spaces (while the viewport is still relatively large).

Directly related: #653

@chillu
Copy link
Member

chillu commented Sep 21, 2018

We've come across react-resize-aware before, and it doesn't work in FF. See @maxime-rainville summary at #595. Is what you're trying to do possible via react-resize-observer?

@NightJar Happy for your team to pick this up and fix it across all forms in core, which can then benefit the elemental inline editing use case. Can you please bring it to your PO's attention?

@NightJar
Copy link
Contributor Author

NightJar commented Sep 21, 2018

@brynwhyman ^ :)

@maxime-rainville
Copy link
Contributor

I've implemented a react-resize-aware using the resize-observer has part of the search. It's a drop in replacement for https://github.com/FezVrasta/react-resize-aware

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants