React-admin: NumberField and BooleanField misalignment issue when used in Create/Edit form

Created on 20 Oct 2017 · 6Comments · Source: marmelab/react-admin

I'm using Fields in Create/Edit form for read-only properties.

What you were expecting:
<NumberField/> and <BooleanField/> are expected to be left-aligned in Create/Edit form. DataGrid seems more appropriate to decide whether to align right or center based on the type of the child Field.

What happened instead:
<NumberField/> is right-aligned and <BooleanField/> is center-aligned in a Create/Edit form.

CodeSandbox https://codesandbox.io/s/k3rv1rzoj7 please navigate to https://k3rv1rzoj7.codesandbox.io/#/posts/13 and go to Miscellaneous Tab.

Environment

Admin-on-rest version: ~1.3.2
React version: ~15.5.4
Browser: Latest Chrome

enhancement

Source

giokokos

👍1

Most helpful comment

I'm aware if this, and this is not something we're going to fi in 1.0, as you can set the style using the style and elStyle props, as in the example.

I'll keep it for 2.0, because since we break BC, we can imagine default styles for grid and vertical layout.

fzaninotto on 23 Oct 2017

👍2

All 6 comments

indeed! this causes alignment issues to the field components created by component factory in edit mode since it reuses those that are found in the list mode: https://github.com/zifnab87/ra-component-factory

zifnab87 on 21 Oct 2017

I'm aware if this, and this is not something we're going to fi in 1.0, as you can set the style using the style and elStyle props, as in the example.

I'll keep it for 2.0, because since we break BC, we can imagine default styles for grid and vertical layout.

fzaninotto on 23 Oct 2017

👍2

awesome @fzaninotto thanks! when is a rough estimate of version 2 release?

zifnab87 on 23 Oct 2017

When it's done

fzaninotto on 24 Oct 2017

😄1

Just for info, this had been answered in past as well (was for Fields and not Input but it is the same explanation more or less) : #570