search

zakodium-oss / react-science

React components and tools to build scientific applications.
https://react-science.pages.dev
MIT License
3 stars 6 forks source link

SplitSide custom style in SplitPane #700

Closed moonayyur closed 3 months ago

moonayyur commented 3 months ago

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 :

image

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

image

stropitek commented 3 months ago

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

moonayyur commented 3 months ago

@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 commented 3 months ago

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 commented 3 months ago

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

image

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

image

stropitek commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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.