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

Floating point percentage inaccruacy? Can't accruate set fixed number of flexible columns #221

Open
Glidias opened this issue Aug 31, 2016 · 1 comment

Comments

@Glidias
Copy link

Glidias commented Aug 31, 2016

Why does even a 33% width not set it to 3 columns all the time? I have to set it to 30% in order for it to not push it down to next line. The same goes for 50%. 50% sometimes results in breaking down to next line and not forming 2 columns, and i have to create a leeway of (48% or something...) to avoid breaks.

var wookmark;
      imagesLoaded('#container', function() {
        wookmark = new Wookmark('#container', {
         itemWidth: (33+"%"), // Optional min width of a grid item
          outerOffset: 20, // Optional the distance from grid to parent
          flexibleWidth: function () {
            // Return a maximum width depending on the viewport
            return getWindowWidth() < 1024 ? '33%' : '33%';
          }
        });
      });
    })();
 var gallery = new Wookmark('#index-gallery-section', {
              offset : 10, // Optional, the distance to the containers border
             // autoResize :true,
              flexibleWidth:true// (100/3-3)+"%"
             , itemWidth: function() {  return  (!breakPts[1].matches) ? (100/2-2)+"%" :  (100/3-2)+"%"; } 
          });

I'm quite confused as the API instructions and examples don't match. flexibleWidth is now a Boolean and not a function/widthValue. Likewise, i strangely discovered itemWidth can be used as a function as well, with flexibleWidth set as Boolean true and it'll apply. However, the calculation requires a slightly less percentage (eg. 48%, 30%) width, to prevent premature wrap-breaking of columns. Why?

Also, itemWidth runs for minWidth constraint, but what if I need a maxWidth constraint instead? Also, leaving itemWidth blank will treat everything at 0 width by default.

@Glidias Glidias changed the title Can't set fixed number of flexible columns Floating point percentage problem? Can't accruate set fixed number of flexible columns Sep 1, 2016
@Glidias Glidias changed the title Floating point percentage problem? Can't accruate set fixed number of flexible columns Floating point percentage inaccruacy? Can't accruate set fixed number of flexible columns Sep 1, 2016
@Sebobo
Copy link
Member

Sebobo commented Sep 28, 2016

Hi @Glidias,

I'll have to check the documentation, maybe there is something out of date.

itemWidth and flexibleWidth can both be functions as you correctly found out, but this is also explained in the readme under itemWidth and flexibleWidth.

You need to specify a lesser percentage because of the offset value.
If you want to only work with percentages you could for now set offset to 0 and create some spacing via css paddings.

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