loba-b / react-equal-height Goto Github PK
View Code? Open in Web Editor NEWCompares element heights and sets the highest
License: MIT License
Compares element heights and sets the highest
License: MIT License
Hello developer, can you pass along the className
property for the <EqualHeight>
and <EqualHeightElement>
components? This would make it possible to use the <EqualHeight>
Component as a bootstrap row
, and the <EqualHeightElement>
as child columns (col-x, ...
) when the appropriate classes are specified.
First of all, thanks for this nice little library. I really like the simple API.
One issue: it breaks builds for SSR, such as Gatsby. Builds crash with the following error:
"document" is not available during server side rendering.
See our docs page for more info on this error: https://gatsby.dev/debug-html
It would be amazing to be able to use this for static site generators. Is there anything I can do on my side to get this running or will an update to the library be necessary (e.g. to check we're in a browser environment before running the script)?
The package works SSR on Next.JS and detect perfectly the height of each element.
However, when I resize my page nothing is happening. I got the same problem if I try to use the method forceUpdate
, it's not working.
I have a grid or flex layout which wrap my columns. I have different number of columns per width, so large may have 4, medium 3 columns, then down to 2. I do not use HTML to break these up as that is just PITA. CSS does it.
If I use EqualHeight which is great, it works, it changes ALL columns to the same height regardless of row. I noticed I have a lagr image in my last row, so all column image containers are set to that one, and so they are too large. Ideally you want it to have EqualHeight per row.
I am not sure how you would achieve that based on it being a flex or grid layout. I've never tried to see if JS can know the last or first elements in a grid/flex row. If it can, then this should be achievable.
In the meantime how does one deal with this? I think I will have to try to set a max. height on my columns content to prevent EqualHeight making them all too large based on a high one.
Hi, thanks for amazing work, I've used your library on several projects now.
There's a problem with building NextJS app with new app router (I didn't try this on pages router, so I don't know if it's limited to app router):
error node_modules/react-equal-height/index.js (1:8585) @ e.exports [as insertStyleElement]
error ReferenceError: document is not defined
I cloned the library and narrowed down the issue. When I'm importing <EqualHeightElement />
from react-equal-height/clean
it seems like that component imports context from the main package and thus trying to inject css styles. Then it fails on ssr, because document is undefined.
I just copied the EqualHeightElement component and changed import to:
import { EqualHeightContext } from 'react-equal-height/clean';
and it worked
Currently I cannot even use babel to transpile the the it to ES5 - I get the following warning
export 'EqualHeightElement' (imported as 'EqualHeightElement') was not found in 'react-equal-height/clean' (module has no exports)
Therefore it cannot be used as NPM package when you need to support IE11.
Hi,
How can I use this library when I need to equalize heights of elements that are in separate children React component(s)? It seems to support only the scenario when all the markup is inside one React component, which is not really usable for most of the scenarios. Or did I understand the documentation wrong?
Thank you!
BR,
Jiri
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.