Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Isotope (Spaces between columns)

Hi everybody.

I have this 3 columns isotope grid and I would like to add (right and left) spaces between the columns. How can I achieve it ? (I want it to work on Chrome, IE, Firefox, Safari and Opera)

You can find my website here:

http://www.isponsorz.net/2/?q=products

I'm building it on drupal but it doesn't matter. I should be able to do it with CSS.

So far, adding margins anywhere resulted in having only 2 columns displaying blocks and the third block pushed down the next row below. I've been able to accomplish something that works with borders the same colour than the background but I don't like to see the borders when the elements move (after clicking on the filter).

I would really appreciate if someone could help me on this one. I've been trying for days !!!

thanks

User Gravatar

user921

Posted Dec 28 2013 6:47 UTC

$50


  • Assigned To NBoychev
  • Solved
  • isotope
  • 9170 Views

12 Replies


every isotope element has a width of 377px

to have margins work per element - do the following

set isotope-item (or isotope-element) to be 367px and add margin of 5px

.isotope-item{
width: 367px !important;
margin: 5px;
}

after that see if you can change the file views_isotope.js and have instead of

$container.isotope({
    itemSelector: '.isotope-element',
    //filter: '.nothing'
  });

do

$container.isotope({
    itemSelector: '.isotope-element',
   masonry: { columnWidth: 377}
  });

what this does is set a predefined columnWidth of 377px (367 + 5px on each side), so the isotope algorithm knows when a column ends.

This happens since the container size divided by 3 is 377.3 so there isn't enough space to make the margins appear

ps - I love ESP guitars :)

User Gravatar

guyisra

Posted Dec 28 2013 7:55 UTC

First and foremost, thanks for your help guyisra.

How do I set the javascript part for the different width of my responsive website ? Also, could I somehow set the width to 377.3 so that my isotope container be full width (like the filters button) ?

User Gravatar

user921

Posted Dec 28 2013 8:38 UTC

to make the size responsive:

find the width of the container

$("#isotope-container").outerWidth(true)

divide it by 3

reduce it by a little depending on how you want your margin

and set it to be the columnWidth

now depending if you want it to be masonry (like bricks) or cellByRow (which arranges it by the height of the tallest item) it will have different experiences - in this case, take the guitar SED VARIUS SEO as an example. Since the title of the guitar is longer than others, when minimizing the screen to a certain point makes that element taller than others, which messes up the screen. My suggestion is to limit the size of the name of the guitar, or the size of the element so that wont happen

anyway, once you calculate the width of each element just do

$("#isotope-container").isotope({ layoutMode: 'masonry', masonry: {columnWidth : <your size>}})

or with constant height

$("#isotope-container").isotope({
  layoutMode: 'cellsByRow',
  cellsByRow: {
    columnWidth: <your width>,
    rowHeight: <your height - its a constant so make sure it works>
  }
});

in these cases, you can delete the margin that was set before, since this way you set the column to be slightly bigger than what the elements actually are, which will cause a margin effect anyway. Also, margins with set width and height on columns will mess the entire thing, and they are not needed

User Gravatar

guyisra

Posted Dec 28 2013 12:38 UTC

Somehow, your codes made the filter buttons non-functional.

any ideas why ?

Otherwise I came up with this solution (although it may not be the proper way to do it):

var $container = $('#isotope-container');

$container.isotope({ itemSelector: '.isotope-element', resizable: false, masonry: { columnWidth: $container.width() / 3 } });

$(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 3 } }); });

and then added CSS for different @ media such as

.isotope-item{ width: 32.44994110718490% !important; margin: 5px; }

What do you think ?

Would it be a proper way to do it ?

User Gravatar

user921

Posted Dec 28 2013 14:41 UTC

The way I did it does not work on my android phone with the android browser. It works with chrome, firefox and opera but many people use the android browser. ..have to find another solution !!!

I was missin a } in the css which caused the bug with the android browser. everything is working fine now !!!

I'm waiting for your feedback !!

User Gravatar

user921

Posted Dec 28 2013 15:01 UTC

Hi user921,

For best responsive result with isotope, set the width of the elements in the CSS in percents like this:

.isotope-item { width: 33.33% !important; border: 8px solid #fff;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

The box sizing is very important: http://css-tricks.com/box-sizing/

Also use white border instead of margin. Then just set the columnWidth to 1:

masonry: {
    columnWidth: 1
}

This will force isotope to have maximum available columns, and you won't need additional logic to calculate the column width.

On the media queries you can change the size:

.isotope-item { width: 50% !important; }

You will need one last small modification. Because we have 8px border on every element, this means that visually the container will be 16px (2x8px) smaller than the filter buttons. So you will need to add negative margin to the container, to compensate that space:

#isotope-container { margin: 0 -8px; }

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 28 2013 15:47 UTC

hey, regarding your question if its a proper way of doing it - I don't think there is a right or wrong way - there is a working way and a non working way.

I don't understand your status of the problem - What is working (and to what extent) and what is still missing and you need help with.

thanks

User Gravatar

guyisra

Posted Dec 29 2013 6:02 UTC

Ok thank you Nikola and Guyisra. I could not go with this option: .isotope-item { width: 33.33% !important; border: 8px solid #fff; because we can see the white stripes on each side of the element when clicking on the filters.

So my final solution is this:

var $container = $('#isotope-container');

$container.isotope({ itemSelector: '.isotope-element', //filter: '.nothing' });

and CSS:

isotope-container { margin-left: -4px; margin-right: -4px; }

(I could not put -5 because there is not enough spaces (but 1px isn't really noticeable)

with different CSS for different @ media such as:

.isotope-item{ width: 32.44994110718490% !important; margin: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Do you guys see anything wrong with it ?

User Gravatar

user921

Posted Dec 29 2013 8:11 UTC

Hi user921,

If the your browser requirements are IE9+, you can use background clip property, in combination with transparent border:

.isotope-item { width: 33.33% !important; border: 5px solid transparent;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

http://css-tricks.com/transparent-borders-with-background-clip/

http://caniuse.com/#search=background-clip

It's not good idea to use width of 32.44994110718490%, because it's hardcoded for the current page width and margin.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 29 2013 10:59 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi Nikola.

That's definitely a much simpler and better solution.

We're now very close to perfection.

One last little detail:

isotope-container { margin-left: -5px; margin-right: -5px; }

Somehow I have to set it up at -4 otherwise the third block goes down the next row. (like there is no space for -5px)

Could you maybe explain me why ? (Although 1 px doesn't really matter. You've fixed my issue anyhow)

User Gravatar

user921

Posted Dec 29 2013 11:46 UTC

Hi user921,

It seems like webkit is having troubles with container width that doesn't divide by 3:

With -4px margin the width of the container is 1140px - 1140/3 = 380.

For -5px it's 1142px - 1142/3 = 380.667.

So to compensate that 1px you may need hack the margins:

margin: 0 -6px 0 -5px;

This mean 1143px total width - 1143/3 - 381.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Dec 29 2013 12:00 UTC

thanks a lot Nikola and Guyisra.

You helped me understand better this isotope grid !!!

Happy Holidays !!

User Gravatar

user921

Posted Dec 29 2013 12:05 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions