Initial size could be specified in px (not just in %) about split HOT 12 CLOSED

Now how can I say:

Split(['one', 'two'], {
sizes: ['30px', 'remaining of the container width'],
});

from split.

I think this will look something like this:

Split(['one', 'two'], {
    sizes: ['30px', '560px'],
});

Might as well add support for any CSS value. The numeric values ([50, 50]) would still be interpreted as percentages for backwards compatibility.

from split.

Seems like a handy use case. How does something like this look?

Split(['one', 'two'], {
    sizes: ['30px', None],
});

For setting both sides, something like this?

Split(['one', 'two', 'three'], {
    sizes: ['30px', None, '30px'],
});

from split.

What about 'auto' instead of ''None'?
On Oct 21, 2015 12:47 PM, "Nathan Cahill" [email protected] wrote:

Seems like a handy use case. How does something like this look?

Split(['one', 'two'], {
sizes: ['30px', None],
});

For setting both sides, something like this?

Split(['one', 'two', 'three'], {
sizes: ['30px', None, '30px'],
});

—
Reply to this email directly or view it on GitHub
#10 (comment)
.

from split.

Opps, right. Switching between writing Javascript and Python. 'auto' is much better.

from split.

As I'm working on this, I realized a problem with the 'px' sizes. When changing the browser window size, the sizes will not adjust like they do with calc(% - 5px). I think the desired behavior for 'auto' would be to automatically fill the space.

from split.

Right! Any progress?

from split.

Haven't come up with a clean way to do this, no.

from split.

How about calculating the percentage at DOMReady, so if the sizes are set to ['30px', None, '30px'], inside an element that's 300px you could compute it down to ['10%', auto, '10%'], then when the window resizes everything still works...just a thought

from split.

Good idea @jolyonruss. Would 10%, 80%, 10% be the expected behavior though (fully flexible)? Or would you expect 30px, auto, 30px (fixed on the sides, flexible in the middle).

I'll take a swing at implementing the first.

from split.

Hey, might I also suggest using Flexbox for 'auto'?
That's the way it was done in atom: atom/atom#5902

from split.

Support is added for flexbox in v1.2.0. I'd rather leave this feature out of the library and allow users to implement it by calculating the desired initial percentages beforehand.

from split.