Unable to change the width of individual widgets in a Row

[kdheepak]

I'm trying to plot a ipydatagrid widget in solara, and it works great when using solara.Column:

but if I try to make the tables side by side, i.e. using a solara.Row, the individual widgets in this case collapse:

Is there a way to make it equal in width? I tried justify as space-evenly and no luck. Here's the code to reproduce this:

import solara
import ipydatagrid
import pandas as pd

df = pd.DataFrame({
        "afljasdfljasdfasd": [1,2,3,4],
        "afasjdfkljadsflasdj": [1,2,3,4],
        "fasdlkfjasdljasgsad": [1,2,3,4],
        "gdsalfjsdalkvjasdfas": [1,2,3,4],
        "ajdgakldjalbsdfa": [1,2,3,4],
        "klasdbjasdlbjasl": [1,2,3,4],
        "asdgjlaskdjblaskjbasl": [1,2,3,4],
        "dsfjlasdjfalsdjvlsadk": [1,2,3,4],
        "asdgasjdlfjasdlfkjsadlfjs": [1,2,3,4],
    })

@solara.component
def Page():
    dg = ipydatagrid.DataGrid(df)
    solara.Row(children=[dg, dg])

Page()

[maartenbreddels]

Hi Dheepak,

Note that we will have some docs on ipydatagrid soon: https://github.com/widgetti/solara/pull/531

But, I think using solara.Columns will in this case be easier, it will make the widths expand (by default).

Hope that helps. solara.Row uses flexbox, and it depends in the flex-grow properties of the children (the datagrids) if they expand or not.

Not a CSS expert thought (is this correct @iisakkirotko ?)

cheers,

Maarten

[iisakkirotko]

Hi @kdheepak!

@maartenbreddels is indeed correct. I would go about this by making the top element a solara.Row, with two solara.Columns as children, with one dg each. So:

@solara.component
def Page():
    dg = ipydatagrid.DataGrid(df)
    with solara.Row():
        solara.Column(children=[dg], style={"flex-grow": "1"})
        solara.Column(children=[dg], style={"flex-grow": "1"})

Let me know if that works!

P.S. You can of course replace the solara.Columns with any other component with flex-grow: 1

[kdheepak]

Awesome! That seems to work great! I did try with solara.Row(): and used two columns in there but using flex-grow: 1 seems to do the trick!

Thanks for the quick responses!