diff --git a/docs/Inputs.md b/docs/Inputs.md index 6ff608c647f..380e1c1fbdd 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -452,6 +452,25 @@ const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', fu `` also accepts the [common input props](./Inputs.md#common-input-props). +**Tip**: When used inside a material-ui `` (e.g in the default `` view), `` displays link tooltip as cut off when the user wants to add a hyperlink to a word located on the left side of the input. This is due to an incompatibility between material-ui's `` component and Quill's positioning algorithm for the link tooltip. + +To fix this problem, you should override the default card style, as follows: + +```diff +import { Edit, SimpleForm, TextInput } from 'react-admin'; ++import { withStyles } from '@material-ui/core/styles'; + +-const PostEdit = props => ( ++const PostEdit = withStyles({ card: { overflow: 'initial' } })(props => ( + + + // ... + + +-); ++)); +``` + ### `` `` is the most common input. It is used for texts, emails, URL or passwords. In translates to an HTML `` tag. diff --git a/packages/ra-input-rich-text/README.md b/packages/ra-input-rich-text/README.md index d0d8ccaeb72..12f4b9d3cc5 100644 --- a/packages/ra-input-rich-text/README.md +++ b/packages/ra-input-rich-text/README.md @@ -55,6 +55,25 @@ const configureQuill = quill => quill.getModule('toolbar').addHandler('bold', fu ``` +**Tip**: When used inside a material-ui `` (e.g in the default `` view), `` displays link tooltip as cut off when the user wants to add a hyperlink to a word located on the left side of the input. This is due to an incompatibility between material-ui's `` component and Quill's positioning algorithm for the link tooltip. + +To fix this problem, you should override the default card style, as follows: + +```diff +import { Edit, SimpleForm, TextInput } from 'react-admin'; ++import { withStyles } from '@material-ui/core/styles'; + +-const PostEdit = props => ( ++const PostEdit = withStyles({ card: { overflow: 'initial' } })(props => ( + + + // ... + + +-); ++)); +``` + ## License This library is licensed under the MIT License, and sponsored by [marmelab](https://marmelab.com).