Problems with horizontal packaging layout

Question

I hope someone has experience with the package that I use for the project.

I can not get the horizontal layout to work. Declaring a package object in HTML seems to have worked somewhat.

<div class="packery js-packery" data-packery-options='{ "isHorizontal": true }'>
...
</div>

Although it seems that the width and height do not change through CSS, as the docs suggest. But I did not bother to dig further, because I need to use Javascript. And the equivalent does not work at all:

$('.packery').packery({
    itemSelector: '.item',
    isHorizontal: true,
});

As a result, the <div>batch processing object element was assigned 0px high and 4px wide. (The 4px width probably comes from the 1px border with some elements.) The package documents say that horizontal layout requires height adjustment. But the CSS provided by the docs seems to do nothing, whether the packaging was initialized in HTML or Javascript:

/* containers need height set when horizontal */
.packery.horizontal {
    height: 200px;
}

However, none of my inserted elements are displayed, and the package <div>is 4px x 0px. So, I set the container height in Javascript:

$('.packery').css('height', '400px');

This increases the height of the element, but the width remains four times. And therefore, all elements essentially have zero width and invisibility. So, I tried to force the width of the container:

$('.packery').css('width', '1000px');

, , . <div> Chrome, , . <div> Javascript? , , , packery().

, , . , , , - . - ?

Answer 1

isHorizontal. !important CSS div .