Graph components do not flex

Dash Python
1

I am trying to apply some css file to dash components so that when hovering effect the content will auto stretch. Here are some common css tricks using flexboxes:

.flexbox {
  display: flex;

  > div {
    flex: 1;
    margin: 0.5rem;
    flex-basis: 0;
    transition: flex-grow 0.3s;
    -webkit-transition: flex-grow 0.3s;

    &:hover {
      flex-grow: 3;
      transition: flex-grow 0.3s;
      -webkit-transition: flex-grow 0.3s;
    }
  }
}

and here is a snippet of my app:

 html.Div(
        [
        html.Div(
            [dcc.Graph(),],  #some figure here
            className = "item"
        ),
        html.Div([
        dash_table.DataTable(), # some data-table here
        ], 
        className="item"
        ),
        html.Div([
        dcc.Graph(), # again some graph here
         ], className="item", 
    ),
        ], className='flexbox'
    ),

Now the when hovering over the graph component, the data-table flex-shrink perfectly, but the graph cannot grow properly. Similarly when hovering over data-table component as the graph do not shrink the data-table cannot expand.

I am looking for some way to ‘properly’ enlarge the graph component when hovering-over. By ‘properly’ I mean resizing the graph in the same way as in changing the size/width of the graph itself. I tried somethings like transform:scale(1.5) in css as well, but this is just scaling the graph component as a whole svg, namely all icons/ticker grow large. What I really look for is just zoom the graph alone to fit the content.

Any luck?

2

Interested in this. Would be great to use Flexbox in css for styling. Did you solve and whew able to use Flexbox properly in other cases?

1 Like
3

Does anyone know how to do this? I.e. use flex boxes? I created a flex system and it works fine. But when I put e.g. dcc.Graph() components in some of the boxes, they just grow way off the page!