React-admin: NumberField, BooleanField wrong position in TabbedForm and SimpleShowLayout

[remi13131]

Hi,

While developping the #515 Feature, I found out that NumberField and BooleanField (at least, maybe more components act like this) were not displayed correctly in TabbedForm and in SimpleShowLayout (at least in other views as well it might not display well).

What is strange is that it only happens to me in the example from the admin-on-rest repo, but not in my personnal project...

I'm using admin-on-rest 0.9.4

Steps to reproduce :

• > git clone https://github.com/marmelab/admin-on-rest.git
• > make intall
• > make run
• Edit example/posts.js and change TextFields or TextInputs or BooleanInputs that are used to NumberFields and BooleanFields

Look at the result, the inputs will be displayed in the wrong position (BooleanField at the center of the div and NumberField at extreme right of the div)

Screenshots :

[remi13131]

didn't know about the custom style that partly resolve this when I posted this issue, but still text-align: left; should be default behavior IMHO.

And here Numberfield is also clearly overflowing

[remi13131]

I found out that the same behavior applies in Datagrid

However, when it is possible to set the proper left position by hand even if it is not default with
headerStyle={{ textAlign: 'left' }} style={{ textAlign: 'left' }} for Numberfield element, these props doesn't work on BooleanField because the resulting SVG box doesn't align as text.

This HTML is produced in Datagrid :

<td style="padding: 0px 12px; height: 48px; text-align: left; font-size: 13px; overflow: hidden; white-space: normal; text-overflow: ellipsis; background-color: rgba(127, 221, 233, 0.4);">
      <svg viewBox="0 0 24 24" style="display: block; color: rgba(0, 0, 0, 0.87); fill: currentcolor; height: 24px; width: 24px; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; margin: auto;">
         <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"></path>
      </svg>
</td>

So the correct text-align: left; is applied, but not taken into account because of the svg tag :

EDIT :
I was missing something . In fact <BooleanField source="foobar" headerStyle={{ textAlign: 'left' }} elStyle={{ float: 'left' }} /> did the trick in Datagrid
I still think this should be default behavior though.

[remi13131]

Sorry but I really have to reopen this.
In fact, the only way I found to have BooleanField left side in Edit or Show was to do this :

<BooleanField source="shell" style={{ float: 'left' }} />
<span style={{ clear: 'both' }} />
<BooleanField source="sysadmin" style={{ float: 'left' }} />

Because doing simply

<BooleanField source="shell" style={{ float: 'left' }} />
<BooleanField source="sysadmin" style={{ float: 'left' }} />

breaks alignment :

I think this is really counter-intuitive.

[djhi]

<BooleanField source="shell" elStyle={{ margin: 0 }} />

[djhi]

That's because by default, Material-ui applies auto margins to the svg icons, thus centering them

[djhi]

I'm not in favor of applying the 0 margin by default as it is better to have them centered in Datagrid imo

[djhi]

ping @fzaninotto your opinion about this ?

[fzaninotto]

The primary function of fields is to be used in <Datagrid>. If we can't have a formatting that works both for <Datagrid> and <Show>, my opinion is that it should work primarily on <Datagrid> and not on <Show>.

[remi13131]

Thanks for the tip, didn't thought about margin !

Will be using this then. For NumberField (see OP) I think it is really strange in Show/Edit that it is text-align: right; and thus overflowing.

EDIT : I posted at the exact same time as @fzaninotto, so OK, understood !