New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Percentage widths support #147

Closed
koppelaar opened this Issue Oct 26, 2015 · 24 comments

Comments

Projects
None yet
@koppelaar
Copy link

koppelaar commented Oct 26, 2015

This issue has been brought up before (#57) and has been closed, which I think should not be the case.

It's currently not possible to give an element a width of 50% without creating an empty dummy element next to it and assigning appropriate flexbox properties to both of them, which is of course a very weird solution. (http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid)

Also the lack of percentage support, makes it really hard to use proper media queries. Example:
You have 12 elements in a single container. On a small screen with you want to align them in 6 rows of 2 columns. On a bigger screen, you want them to align in 4 rows of 3 columns, using media queries.

Normally you'd like to give the elements a width of 50% in the first scenarios and 33.33% when the media query kicks in. This is not possible since we can only 'fake' percentage widths when we introduce a 'row container'. So in order to make the app responsive, we'd need to use Javascript to dynamically move the items around between the row containers, which is less than ideal.

@sophiebits

This comment has been minimized.

Copy link
Contributor

sophiebits commented Oct 26, 2015

I imagine we would be happy to take a pull request for this, but it hasn't been a high priority because it is possible to replicate the behavior in most cases using flexbox even though it's "weird".

@hayesmaker

This comment has been minimized.

Copy link

hayesmaker commented Dec 3, 2015

+1, seems weird to reimplement css without support for % widths (and height)

@cxfeng1

This comment has been minimized.

Copy link

cxfeng1 commented Dec 9, 2015

+1

@appleguy

This comment has been minimized.

Copy link

appleguy commented Dec 19, 2015

@spicyj curious what the recommended way is to replicate with the other functionality? AsyncDisplayKit relies on a set of code similar to css-layout (it's ComponentKit's flexbox implementation), but it shares a similar limitation I'd like to resolve.

@sophiebits

This comment has been minimized.

Copy link
Contributor

sophiebits commented Dec 19, 2015

@appleguy I meant that in most cases, you can build equivalent layouts using flex box (perhaps with spacer views). For example, if you want a width 50% box, make two siblings each with flex 1. If you are trying to support percentages generically in ASDK, it is probably simplest to just change the flexbox implementation you have.

I looked at adding percentage support to this one – looked pretty simple; the hardest part might be figuring out what the API should be (since at least the current C API here assumes pixels).

@appleguy

This comment has been minimized.

Copy link

appleguy commented Dec 19, 2015

Aha, thanks for the input! Indeed we have ASRelativeDimension, which can express the idea of a %, absolute, or points - but just don’t have the logic (and also the API, but that would be relatively easy to add by changing our flexGrow / flexShrink from BOOL to a number). A project for another evening.

On Dec 18, 2015, at 11:56 PM, Ben Alpert notifications@github.com wrote:

@appleguy https://github.com/appleguy I meant that in most cases, you can build equivalent layouts using flex box (perhaps with spacer views). For example, if you want a width 50% box, make two siblings each with flex 1. If you are trying to support percentages generically in ASDK, it is probably simplest to just change the flexbox implementation you have. I looked at adding percentage support to this one – looked pretty simple; the hardest part might be figuring out what the API should be (since at least the current C API here assumes pixels).


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

@vitalets

This comment has been minimized.

Copy link

vitalets commented Jan 8, 2016

+1

@xenophilicibex

This comment has been minimized.

Copy link

xenophilicibex commented Jan 27, 2016

I get the screenWidth and divide by 2 if I need an element that is 50% and don't want to create a dummy element.

@vitalets

This comment has been minimized.

Copy link

vitalets commented Jan 28, 2016

@dubert it works if you only create single orientation app. Otherwise on orientation change your elements will not update.

@aakashsigdel

This comment has been minimized.

Copy link

aakashsigdel commented Mar 30, 2016

+1 really tedious to replicate some behavior with flex. Adding spacer views shouldn't be the solution for each and every case.

@vjeux

This comment has been minimized.

Copy link
Contributor

vjeux commented Mar 30, 2016

To repeat what @spicyj said, percentage support is something we want but haven't focused on so far. If you want to have an impact, please do work on implementing it :)

@pavlelekic

This comment has been minimized.

Copy link

pavlelekic commented Jun 16, 2016

+1, this would really solve the problem with ListViews in grid mode, currently there is no good solution and I think grids are important for a lot of apps

@n1ru4l

This comment has been minimized.

Copy link

n1ru4l commented Jun 22, 2016

I did it this way, by using a template string (react):

<div className='upload-file__progress' style={{width: `${progress}%`}} />
@pavlelekic

This comment has been minimized.

Copy link

pavlelekic commented Jun 28, 2016

@n1ru4l that is react for the web, I was talking about react native. In react for the web you don't need this repo at all

@emilsjolander

This comment has been minimized.

Copy link
Contributor

emilsjolander commented Aug 11, 2016

Percentage sizes is something we would like to support but have not spent any real time on implementing due to not having a strong need for it. There are certain performance concerns regarding supporting the feature but I would be happy to work with the community to support this. As @vjeux said this is a great opportunity to have big impact by submitting a pull request. We are not currently prioritizing this as we have not seen a big need for it yet our selves.

@faceyspacey

This comment has been minimized.

Copy link

faceyspacey commented Sep 18, 2016

+1 ...obviously you can calculate everything in javascript or hack flexbox, and i've done both many times for simple scenarios, but I've recently run into some situations where the amount of calculation I had to do was way too high and time-consuming compared to how easy and natural it is on web.

In addition, React Native Web supports percentages, so it would bring parity with RNW which is rapidly increasing in popularity, and something I think will become a big piece of the React "Native" puzzle (it already has for my latest project). So perhaps the RNW factor increases the priority of this item.

@woehrl01

This comment has been minimized.

Copy link
Contributor

woehrl01 commented Nov 21, 2016

I started to add percentage support to my branch: https://github.com/woehrl01/css-layout/tree/percentage-feature. Can someone have a look if we want to go this direction? @emilsjolander

@emilsjolander

This comment has been minimized.

Copy link
Contributor

emilsjolander commented Nov 21, 2016

@woehrl01 Cool! Yeah this looks to be going in the correct direction. I'm a bit concerned about perf and there are a lot more tests to be added.

@woehrl01

This comment has been minimized.

Copy link
Contributor

woehrl01 commented Nov 21, 2016

@emilsjolander for sure there are a lot of things which can be tuned. And the tests aren't totally enough. Just wanted to make a sneak preview to consider your opinions.

@emilsjolander

This comment has been minimized.

Copy link
Contributor

emilsjolander commented Nov 21, 2016

@woehrl01 Yeah, thanks! looking good

@sospedra

This comment has been minimized.

Copy link

sospedra commented Nov 29, 2016

+1
flexbox only is like moving back to tables :/

@mokafolio

This comment has been minimized.

Copy link

mokafolio commented Dec 2, 2016

@woehrl01 That looks good to me! Did you try running the benchmarks by any chance?

@woehrl01

This comment has been minimized.

Copy link
Contributor

woehrl01 commented Dec 3, 2016

@mokafolio Have a look at #258 I posted some benchmark from my dev-machine. I was able to make it even slightly faster, by reducing the calls to isnan. As I have currently no other device available I would be glad if someone could approve those values on slower devices (android/ios) and/or compiled with gcc. My values are produced with release + o2 + mvc++.

@michaelcpuckett

This comment has been minimized.

Copy link

michaelcpuckett commented Dec 13, 2016

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment