[EuiResizableContainer] initialSize vs. minSize initial calculation

[thompsongl]

I don't know if this is related or not, but I have an issue in my usage of the component where I'm setting an initialSize=15 which only accepts a number as percentage value, then I also set a pixel value minSize=60px. But on initial load, it doesn't respect that minSize. So If the window is skinny, and 15% of the width is less than 60px the panel will be less than 60px.

Originally posted by @cchaos in https://github.com/elastic/eui/issues/4447#issuecomment-767177454

[thompsongl]

To fix the problem that @cchaos found, we'll need to retain the initContainer method. It's the only place that will allow for a minSize vs. initialSize determination based on the container size gaining calculable dimensions. #4447 (comment)

The thing that makes this complex (like the rest of the resizable container logic) is that we can easily encounter situations where the math just doesn't work out. For instance:

Panel 1: initialSize: 15%, minSize: 60px Panel 2: initialSize: 70%, minSize: 100px Panel 3: initialSize: 15%, minSize: 60px

If the container is initially 350px wide, Panel1 and Panel3 must steal space from Panel2. In this case we can make the math work. However:

Panel 1: initialSize: 25%, minSize: 100px Panel 2: initialSize: 50%, minSize: 200px Panel 3: initialSize: 25%, minSize: 100px

If the container is initially 350px wide, each panel needs wants more space than it can have. Also,

Panel 1: initialSize: 35%, minSize: 100px Panel 2: initialSize: 50%, minSize: 200px Panel 3: initialSize: 15%, minSize: 60px

If the container is initially 350px wide, Panel1 has some space to give, but not enough to satisfy everything.

We can certainly come up with something that "works"; just trying to establish some rules to get started.

[cchaos]

Can I also tack on adding the ability to supply a maxSize? 😃

[cchaos]

This is where I think the consumer shouldn't have to specify percentages for every panel. This could easily mean mistakes in math (ensuring they all add up tp 100%). So I'd almost prefer a method where one of the panels kind of has to just be the "rest" and if all the minimums add up to more than the parent, the parent will just have to scroll or accommodate in some way.

So taking your examples above:

Panel 1: initialSize: 15%, minSize: 60px Panel 2: initialSize: [rest], minSize: 100px Panel 3: initialSize: 15%, minSize: 60px

If the container is initially 350px wide, Panel1 and Panel3 must still be both 60px and Panel2 shrinks to 230px.

---

Panel 1: initialSize: 25%, minSize: 100px Panel 2: initialSize: [rest], minSize: 200px Panel 3: initialSize: 25%, minSize: 100px

If the container is initially 350px wide, Panel1 and Panel3 must still be both 100px and Panel2 must be 200px so the container must horizontally scroll to accommodate.

---

Essentially, initialSize is JUST the starting point that happens to accept a percentage instead of needing to supply a pixel value. In fact, I'd like to adjust this prop to also allow passing a pixel value too.

But the panels need to respect the minSize full stop. If the consumer didn't account for these, it just overflows. And same would go for applying a maxSize. If the added totals don't equal the container width, then there's just space leftover.

[thompsongl]

Thanks, @cchaos, this helpful for prioritizing calculations. Hopefully I can get into the code this week.

[github-actions[bot]]

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.