Библиотека JS / jQuery добавляет стиль всем дочерним элементам, который не принимается - PullRequest
Новая
       9

Библиотека JS / jQuery добавляет стиль всем дочерним элементам, который не принимается

0 голосов
/ 27 февраля 2019

Я использую эту библиотеку JS - Magic Grid , чтобы добавить красивый макет для элементов на странице.Это тело: 

<div id="grid" class="container">
   <div class="row">
       <div class="item1"></div>
       <div class="item2"></div>
       <div class="item3"></div>
       <div class="item4"></div>
   </div>
</div>
// Magic Grid:
<script>
   let magicGrid = new MagicGrid({
     container: "#grid", // Required. Can be a class, id, or an HTMLElement
     static: true, // Required for static content. Default: false.
     items: 10, // Required for dynamic content. Initial number of items in the container.
     gutter: 0, // Optional. Space between items. Default: 25(px).
     maxColumns: 3, // Optional. Maximum number of columns. Default: Infinite.
     animate: true, // Optional. Animate item positioning. Default: false.
   });
   magicGrid.listen();
<script>

Дело в том, что эта библиотека устанавливает стили transform и position для всех потомков в контейнере с идентификатором grid.Результат будет примерно таким (px приблизительные для этого примера): 

<div id="grid" class="container" style="position: realitve; height: 980px">
   <div class="row" style="transform: 0px, 0px;"> <!- here have to be no style attr
       <div class="item1" style="transform: 135px, 0px; position: realitve; ..."></div>
       <div class="item2" style="transform: 233px, 110px; position: realitve; ..."></div>
       <div class="item3" style="transform: 459px, 230px; position: realitve; ..."></div>
       <div class="item4" style="transform: 670px, 397px; position: realitve; ..."></div>
   </div>
</div>

При каждом изменении размера окна положение элементов будет пересчитываться, чтобы соответствовать отзывчивости для всех различных устройств и размеров окон.

И тут возникает проблема.Без row все прекрасно танцует, кроме телефонов.Расположение немного смещено вправо, и единственное, что помогает, это div с классом строк.

Но если размер окна изменяется, этот row div также получает transform, и компоновка тормозит везде.Элементы расположены где-то между нижним колонтитулом и клавиатурой.Есть ли способ каким-либо образом получить эту строку div, но чтобы защитить / помешать lib настроить свой атрибут style?

Я пытался запустить скрипт для изменения размера окна, чтобы проверить, имеет ли строка attr style иудалите его, если это правда, но, к сожалению, это совсем не помогло.

Или единственный вариант - это изменить код в lib в соответствии с моими потребностями? Индексный файл Magic Grid .Даже не уверен, что это возможно.

ОБНОВЛЕНИЕ!Решено.

Итак, проблема была в конструкторе.Я не инициализировал конфигурацию useTransform.Как только я инициализировал useTransfrom: false, компоновка стала реагировать на всех устройствах БЕЗ row div.Странное чувство, потому что я не совсем понимаю связь между useTransform:false; без строки и useTransfrom: true; со строкой.

...