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

Padding should be considered when calculating columns #37

Open
sogehige opened this issue May 18, 2021 · 1 comment
Open

Padding should be considered when calculating columns #37

sogehige opened this issue May 18, 2021 · 1 comment

Comments

@sogehige
Copy link

sogehige commented May 18, 2021

In several cases I have 1 extra column when padding is used

I solved it with, but it is just workaround for me

diff --git a/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue b/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
index 5400ef7..4a97dbd 100644
--- a/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
+++ b/node_modules/vue-masonry-wall/src/vue-masonry-wall.vue
@@ -185,7 +185,7 @@
        * @private internal component use
        */
       _columnSize() {
-        const length = Math.round(this.$refs.wall.scrollWidth / this._options.width)
+        const length = Math.round(this.$refs.wall.scrollWidth / (this._options.width + this._options.padding.default * 2))
         if (length < 1) return 1
         return length
       },
@DerYeger
Copy link

I created a Vue 3 component based on this repository.
You can find it at https://github.com/DerYeger/vue-masonry-wall.

It has been rewritten in TypeScript, does not rely on external dependencies, takes padding in regard when calculating the column count, and supports item removal.
A demo is available at https://vue-masonry-wall.yeger.eu/.

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