Adjusting the StackGrid component's width breaks the display
loganmay opened this issue · 1 comments
First off, I'd like to say that this Component is awesome and I've really enjoyed using it in my project! Thanks so much for the fantastic work!
I did run into an issue, however. I have the stack grid set up as follows:
<StackGrid {...this.getStackGridProps()} style={{width: this.props.width}}> {this.renderGridItems()} </StackGrid>
Some logic outside of the component toggles that width style prop between 50% and 100%. When going from 100% to 50%, the grid always arranges in interlocking perfection. However, when going from 50% to 100%, there are uneven spaces between the grid items. Here's a picture with some scribbled arrows pointing to the spaces that shouldn't be there.
I've experimented with calling updateLayout() on a ref attached to the StackGrid component, as well as using different values for the width (e.g. vw instead of %), but that hasn't seemed to make a difference.
If you have any thoughts or can look more into this, please let me know!
I also had another error where certain rerenders caused the items to scramble around on the screen with similar uneven gaps to the ones pictured. I can follow up with another issue there if the maintainers so desire. Thanks!
I also have the problem. I just set like this : <StackGrid columnWidth={'50%'} gutterWidth={25}>