Starting from this React repository, and following the guides for creating dash components I’ve created a component (dash 0.41 and 1.0) that can resize and be drag-n-dropped just fine. I have also tested callbacks with it and they also work fine.
However, the children of the component do not resize accordingly. When I resize and click on the graph’s “autoscale” it usually resizes (unless it is modified by some other callback), but the text (H4 here) does not. How can I make sure that the children elements are resized accordingly?
Picture:
Example code (simplified) from the original JS repo: https://codesandbox.io/s/keen-jepsen-bi1y1
Code for the component
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Rnd from 'react-rnd';
export default class ResizeDraggable extends Component {
constructor(props){
super(props)
this.state = {
x: props.x,
y: props.y
}
}
handleInputChange(e){
// THIS IS NOT USED CURRENTLY, but may be later used
// for callbacks. It was created based on the examples
// get the value from the DOM node
const newValue = e.target.x;
// update the state!
this.setState({
x: newValue
})
}
render() {
const {id, children, minWidth, minHeight,
style, setProps, x, y} = this.props;
return (
<Rnd id={id}
default={{
// starting position
x: x ? x : 20,
y: y ? y : 20,
width: 200,
height: 100,
}}
style={style == null ? { 'border': '10px solid'} : style}
minWidth={minWidth}
minHeight={minHeight}
bounds="parent"
onchange={this.handleInputChange}
><div> // I HAVE TRIED: using " style={{width: x}} " , and removing the div
{children}
</div>
</Rnd>
);
}
}
ResizeDraggable.defaultProps = {};
ResizeDraggable.propTypes = {
/**
* The ID used to identify this component in Dash callbacks
*/
id: PropTypes.string,
/**
* A label that will be printed when this component is rendered.
*/
label: PropTypes.string.isRequired,
/**
* The value displayed in the input
*/
value: PropTypes.string,
/**
* Dash-assigned callback that should be called whenever any of the
* properties change
*/
setProps: PropTypes.func,
children: PropTypes.element,
minWidth: PropTypes.number,
minHeight: PropTypes.number,
x: PropTypes.number,
y: PropTypes.number,
style: PropTypes.object
};
Example part of code in Dash
dashboard_layout = [
html.Div([], style={
'width': '95%',
'height': '650px',
'backgroundColor': '#DDCC33',
'border': "3px solid"
}, id="dashboard"),
html.Button("Add component", id="add_dashboard_component", n_clicks=0)
]
@app.callback(Output('dashboard', 'children'),
[Input('add_dashboard_component', 'n_clicks')],
[State('dashboard', 'children')])
def display_output(n_clicks, children):
children.append(
dash_rnd.ResizeDraggable(
id='some_id',
children=[
html.H4("Hello"),
dcc.Graph(figure={
'data': [{
'type': 'scatter',
'y': [5, 3, 6, 1, 2, 4]
}],
'layout': {
'title': "Yay",
'margin': "10px",
# also tried: "height": "200px !important",
# also tried: "width": "300px !important"
}
})
],
label='mah cool label',
style={"border": "3px dashed"},
x=20*len(children),
y=20*len(children),
))
return children
I have no idea how to force the children to not leave the boundaries of the parent, so any direction is appreciated.
