Component can't get the whole width screen size without resizing

Dash Python
1

Hi fellows,

I’m playing with a component and I would like to create the charts dynamically but it’s not recognizing the screen size on the first loads and also, sometimes the chart inside of the div goes over the div box.

The problem of the width size in the div (it will render correctly only if I do resize the screen size, as shown in the gif below):
screensizeproblem

Also, sometimes, instead of the chart be shown inside of the div, it’s going over




It will be fixed in two cases: if I drag the component or if I resize the screen as the problem above.

All help or suggestions are very welcome!!!

Regards,
Leonardo

2

Hey guys, just to update this thread.

I solved this by adding a clientside_callback() component to fire a javascript script;

Callback receiving the data and events that should be triggered, in this case, the sidebar-toggle and grid-layout

app.clientside_callback(
    ClientsideFunction(namespace='clientside', function_name='resize'),
    Output('test', 'children'),
    [Input('grid-layout', 'layouts'), 
     Input('sidebar-toggle', 'n_clicks')])

On a javascript file js_file.js you need to set:

if (!window.dash_clientside) {
	window.dash_clientside = {};
}
window.dash_clientside.clientside = {
	resize: function(value) {
		setTimeout(function() {
			window.dispatchEvent(new Event('resize'));
		}, 500);
		return null;
	}
};

I found this solution on this StackOverflow question: https://stackoverflow.com/questions/55462861/dash-dynamic-layout-does-not-propagate-resized-graph-dimensions-until-window-i