bywo / react-flexbox-layout Goto Github PK
View Code? Open in Web Editor NEWSimple flexible layouts for IE9+
License: MIT License
Simple flexible layouts for IE9+
License: MIT License
We could avoid explicitly listening to window
's resize
event and just automatically start listening/stop listening depending on the amount of registered components with the engine.
The idea would be that when there is at least 1 component, we listen to the resize event, and when we have no components (because they deregistered), we stop listening.
We can even check if we're in a DOM to support server side rendering, and all that can be handled transparently inside the engine module, without explicitly calling it, or having a side effect when requiring it.
What do you think? Any drawbacks you see?
This was suposed to be taken care of in #21, but webpack-dashboard
management of dependencies, which I believe comes from webpack ouput itself states otherwise:
Is there any chance anyone else could confirm this? @byronmwong @gianu @rafaelchiti
Would be nice to have the same warnings we have when setting a style with inline styles, for those things that can not be overwritten.
We need this for class names since we are using css modules.
This way we can send a className to HLayout or any of the other components for changing the things that are safe to change but warn the user for those things that are not safe.
We could use computedLayout in dev
for achieving this.
In the CSS the flex
definitions contain no units when the basis is "0". This breaks in IE 10 & 11. The recommendation is to use %
to force a unit that is unlikely to be stripped away by CSS minifiers.
React 15.3.0 introduced new warnings https://facebook.github.io/react/warnings/unknown-prop.html
Opening the ticket to discuss and solve them.
I'm using react-flexbox-layout on a project on which I'm not using lodash.
NPM is giving me the usual warning about peer dependencies.
I wonder if lodash shouldn't just be a project dependency only and get removed of peer dependencies on package.json
I've found this issue a few times already where having a flex item that has inside a long word without spaces will cause the text to overflow, explanation:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/0ZmJwayNsCY
Issue: https://jsfiddle.net/cLxdjuLn/
Wondering if you @byronmwong know something about this? Im not sure I fully understand this but ended up putting already 3 min-widths in my code for fixing, wondering if that makes sense or if it should be part of the library? maybe you are more familiar already with this issue.
Thanks!
Hey!, I saw there is a closed ticket where we were doing flex: 1 1 0
and that was breaking the layout completely in IE11 since the flex basis part was unintless and caused a but in IE10 + 11.
I got a question, based on this ticket https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored the suggestion is to use 0%
, wondering why we ended up using 'auto' to be honest auto makes sense but I bumped into an error in my layout in IE11 that gets fixed by doing flex: 1 1 0%
, I need to do more research but wanted to get the conversation going to understand the rational when closing the original bug.
Thanks!
Rafa.
With latest react 15.1.0 available, had to force react on my project to stick to 15.0.1 because of the fixed dependency to 15.0.x on react-flexbox layout.
Wondering if there was any reason for react-flexbox-layout not to support the latest.
Forked the repo and gave it a quick try moving versions to ^15.0.1: master...holden-caulfield:master
Tests seems to run well but not sure if that is enough. Happy to create a PR for that change, but thought about asking first if there was a bigger reason not to do this.
Thanks!
Hi!
In our project we've been using this library and have the requirement for server side rendering. We've been thinking about approaches to not depend on document
but at the same time make React not bail because of different markup being rendered in the server and in the client.
So with @rafaelchiti we've thought about the strategy to move the vendor differences that may cause different markup to static css classes that handle the vendor differences in the css stylesheet.
What do you think about the approach? Is there any concern you see in advance? Would you be willing to accept a PR with an attempt on that?
Now: * { box-sizing: box-sizing }
Should be: * { box-sizing: border-box }
Lodash 4.x support IE9+ as well.
Right now is forcing me to use 0.13
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.