Retrive object width and height in pixel

Dash Python
1

Hi,
for some reason I need to know the size in pixel of a container.
Is there any way to get the actual size of a html.Div container with a clientside or serverside callback?

I can see those props in the browser inspection but in dash I cannot acces to them.

Can someone setup a simple example?

Here a JS example that works
https://stackoverflow.com/questions/3839227/how-to-get-height-of-div-in-px-dimension

Thank you so much

2

@davidpsq,

You can perform javascript via a clientside_callback and either return the values in the callback, or just have the values sent to the console with console.log.

The javascript in the stackoverflow should work, just pass it the id of the element that you want to know.

3

Sorry,
my understanding of JS is poor.

I written this code but it does not work:

var myDiv = document.getElementById(“myDiv”);
myDiv.Height;

4

Associate this with a button in your layout, this is just an example to give you the height and width of the div in an alert box.

import dash
from dash import html, dcc, Input, State, Output, ctx
app = dash.Dash()

app.layout = html.Div([html.Div(id='myDiv', children="hello there"),
                       html.Button(children='Get myDiv info', id='myButton', n_clicks=0)])



app.clientside_callback(
    """
        function showDetails(n1) {
            if (n1 > 0) {var myDiv = document.getElementById("myDiv");
        alert([myDiv.getBoundingClientRect().height, myDiv.getBoundingClientRect().width]);
        } return 'Get myDiv info'
        } 
    """,
    Output('myButton', 'children'),
    Input('myButton', 'n_clicks'),
    prevent_initial_call=True
)
        
    

app.run_server(debug=True, port=8051)
1 Like
5

@jinnyzor Interesting!
thank you very much. btw it does work in Chrome but not in Firefox.

Is there any way to trigger the callback using the changing size of the Div (for example resizing the browser)?

6

@davidpsq,

You might benefit from this:

@AnnMarieW, thanks for sharing this with me. :slight_smile:

1 Like
7

@davidpsq

You might find these two posts helpful as well:

8

Yes this code is working . Thanks

1 Like
9

Finally i used it and the issue solved for the website i was working.

1 Like