Skip to content
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

vAlign #9

Open
andrewmclagan opened this issue Feb 11, 2014 · 1 comment
Open

vAlign #9

andrewmclagan opened this issue Feb 11, 2014 · 1 comment

Comments

@andrewmclagan
Copy link

vAlign: fit.CENTER

Seems to only center an item if it has dimensions, the docs give the impression that fit.js would circumvent the problem of vertically centering an element that one does not know the height of... If you already have a set height why on earth do you need a plugin? or would you do this through javascript? Seems like an anit-pattern.

@soulwire
Copy link
Owner

The purpose of the script isn't to align elements, it's to fit them. I would certainly discourage using it just to vertically align something, in fact you wouldn't get the desired behavior if you did and there's little point using JS to do something which you can do with CSS.

The alignment options are additions to the fit logic, because depending on the aspect ratio of the elements you're using you will likely end up with vertical or horizontal space (unless you use the cover option), therefor you want to be able to specify how fit deals with this space.

This fiddle shows the before and after of a fit call - you can see how fit is used to scale the object, not just align it.

To summarise, fit was written for eventualities where using generic CSS rules alone is simply not possible. Here's another example that should illustrate this. Can you write a general CSS rule for bar elements that has them fit into foos and maintain their aspect ratio?

As for only centering an element if it has dimensions, can you share an example please? It shouldn't need dimensions (for HTMLElements they are determined by querying offsetWidth and offsetHeight during each fit call), though you will need to set position to absolute if you're using the cssTransform fitting technique.

I hope that explains why it's not an anti-pattern. Perhaps the docs aren't explicit enough about the eventualities in which you would use fit.js. My logic was that if you'd come across that eventuality then you would know why fit is useful, but I might need to call out what it's not supposed to be for if it's misleading some people.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants