SplitSide custom style in SplitPane

[moonayyur]

I'm trying to fix the problem with the ROITable scroll in Pixelium and it is related to the width of the SplitSide I think it should be fixed in SplitPane in react-science so that we can pass the wanted style

In this exemple controlledSide="start"

When giving the first child of SplitPane a max-width of 50%, it takes 50% of SplitSide :

And what we want is the result of giving SplitSide a max-width of 50% :

[stropitek]

@moonayyur please start by making a repro of original problem (the scroll issue) in a PR

[moonayyur]

@moonayyur please start by making a repro of original problem (the scroll issue) in a PR

https://github.com/zakodium-oss/pixelium/pull/94

[stropitek]

When giving the first child of SplitPane a max-width of 50%, it takes 50% of SplitSide

For me this is the expected behaviour. The SplitSide takes 50% of SplitPane by default, and then you tell it to take max 50% of the available space within the left side of the SplitPane.

Also you probably want the controlled side to be "end" because that is the side that will collapse.

Can you maybe explain the original problem with the scrollbar and why you think it is related to the size of the SplitSide?

[moonayyur]

Also you probably want the controlled side to be "end" because that is the side that will collapse.

I used "start" in this example because it was easier to see the problem, but the same thing happens with "end"

Can you maybe explain the original problem with the scrollbar and why you think it is related to the size of the SplitSide?

I want to give the "end" SplitSide a max-width to avoid making the "start" one too small. Its content should then have a scroll in the x axis

In our case, when I add max-width: 50% to the "end" component, this is how it looks like :

[stropitek]

The size of each side of the SplitPanel is not controllable via CSS in the children. You can only control the layout within it. When you set a max-width of 50% it's relative to side you are in, not the entire SplitPanel.

The size property of SplitPanel let's you control the initial size of the "controlled" side.

Dont' you have the expected result if you set the size of the panel containing the large table to a fixed or percentage size?

[moonayyur]

Dont' you have the expected result if you set the size of the panel containing the large table to a fixed or percentage size?

It actually works with a fixed size thanks With a percentage size, the table makes the controllable SplitSide bigger than what's given in the size property and it cannot be reduced manually on the website

[stropitek]

Indeed. I think it's better to rely on a fixed size for this and most use cases anyway.

I'm creating a new issue.