I’m running dcc.__version__ == 1.0.0 and I have three Textarea components which I am trying to edit the following options:
- contentEditable (string | boolean; optional): Indicates whether the element's content is editable.
- draggable (a value equal to: 'true', 'false' | boolean; optional): Defines whether the element can be dragged.
- disabled (string | boolean; optional): Indicates whether the user can interact with the element.
The above is found by running help(dcc.Textarea) So far the only one that seems to be working properly for me is disabled.
Here is my code:
dcc.Textarea(id='display-text-1', value='', disabled=True, contentEditable=False, draggable=False, style={'margin': 'auto'}),
html.Div(id='div-1', children=[
dcc.Textarea(id='display-text-2', value='', disabled=True, contentEditable=False, draggable='false'),
dcc.Textarea(id='display-text-3', value='', disabled=True, contentEditable=False, draggable='false'),
]),
On page load, they initially have no content, but their text is successfully updated at a later time through corresponding callbacks.
The only thing that is consistent across all three Textarea components is that they are all disabled (the user cannot type in any of them). They are still draggable, and display-text-1 does not adjust to the middle. I’ve tried using both string and boolean values as the argument values but to no avail. Any ideas as to what I’m doing incorrectly?
EDITS:
In Google Chrome, disabled is the only argument that works, while in Microsoft Edge, the only argument that works is draggable
Microsoft Edge 44.17763.1.0
Microsoft EdgeHTML 18.17763
Chrome Version 75.0.3770.100
What is the best solution to this problem? For now I’m thinking of simply removing the Textareas but I would like to keep them as borders around the text I’m displaying.