search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.66k stars 5.49k forks source link

Clearing js breaks with block grid #2825

Closed Penderis closed 10 years ago

Penderis commented 11 years ago

Hi apologies if I am creating this in the wrong place - just want to point out that if using a block grid with Clearing js that the margin created by data-clearing will add the margin obviously making the layout wider than what it should be.

Fixed with: [data-clearing] li {margin:0}; maybe clearing needs grid specific css?

also clearing calculates total width of thumbnails then adds to carousel wrapper with a starting position of this supposed width e.g -1534px ; this does not account for the grid css where: ---->This line .large-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } will not allow clearing to put all images in a inline list.

Fixed mine from calling css in site css to overide foundation e.g .clearing-assembled .clearing-container .carousel>ul.large-block-grid-6 li:nth-of-type(6n+1) {clear:none; }

rogercoathup commented 11 years ago

In combination with block grid, clearing also fails to correctly calculate the li (and hence thumbnail image) sizes for the carousel when the clearing container is open.

e.g. for a block grid of 8 elements, [ SCCS @include block-grid( $per-row: 8)], each li is set to a width of 12.5%

When the carousel is opened the total width is the width of all the thumbs added together, not the width of a standard row -- so 12.5% can become a very large number of pixels, which in turn distorts the thumbnails

Penderis commented 11 years ago

@21inspired is this not the way that all carousels calculate container width? but with clearing what happens is it calculates the width but tries to keep the block grids initial structure e.g. 8 per row now in a carousel how does it expect to have navigation not only according to width but height as well since the next row will be below but your container only scrolls horizontal.

I think my fix above does force the block grid to now do what was intended and put all images in one large inline list like a good 'ol fashioned scrolling carousel aught to be.

rogercoathup commented 11 years ago

@Penderis -- yes, it is the way they are calculated.

I wasn't suggesting this was wrong, just that it causes problems in conjunction with block grid.

In this case, I was wanting a block grid for the thumbs on the landing page, but when a thumb is clicked and the clearing container display, I want the default clearing layout. This doesn't happen because the block grid styles set the width on each thumb.

Penderis commented 11 years ago

sorry never replied, as a fix for block-grid to work I override this rule in foundation css div.clearing-container .large-block-grid-6 > li:nth-of-type(6n+1) { clear: both; } The number being the grid you used, so for a large-block-grid-4 overide that one or just overide them all when they are displayed in the clearing container. your normal grid will be intact and when displayed the carousel will work normal like it aught to. Change the clear:both to clear:none within your div.clearing-container complete rule then is div.clearing-container .large-block-grid-4 > li:nth-of-type(4n+1) { clear: none; } - the number depends on your grid.

seantimm commented 10 years ago

Thanks for the report! I'm going to close this issue in favor of #2696 which appears to be the same issue.