Gridstack.js: Создание сетки фиксированной ширины на основе пикселей, а не процентов.

@cblokker Вы когда-нибудь

Это функция, которая меня огорчает:

    GridStack.prototype.cellWidth = function() {
        return Math.round(this.container.outerWidth() / this.opts.width);
    };

В случае ширины на основе пикселей, а также css, определяющего столбцы в пикселях, мне нужно, чтобы эта функция возвращала только this.opts.width.

Я думаю, что нам понадобятся какие-то умения в gridstack, чтобы определить, в какой модели он находится (% или px), или иметь параметр конфигурации, чтобы указать, в каком режиме он находится.

Изменить: это может быть не так просто. Я играю с этим сейчас, чтобы увидеть.

Изменить 2: мое 5-минутное исправление. У него, по крайней мере, еще нет отзывчивого потока.
Diff: поддержка-пиксельная ширина

Мне бы это понравилось, так как есть проблема с просмотром сеток на экранах 4k, иногда вы хотите, чтобы веб-страница была широкой, и в этом случае вам нужно настроить новую сетку, где размеры будут в значительной степени уменьшены вдвое, а затем, когда вы измените размер страница с разрешением, которое другие будут использовать, ширина слишком узкая.

Мне тоже очень хотелось бы, чтобы эта функция поддерживалась gridstack.

То же самое и здесь, я бы хотел увидеть это в стеке сетки.

Тем временем я смог взломать его для моего простого варианта использования (одна строка, disabledOneColumnMode, height = 1)
Чтобы заставить все плитки шириной 100 пикселей (все мои плитки имеют ширину = 1, это не должно быть сложно сделать для любой ширины):
В CSS
$tile-width: 100px; /*100px*/ .grid-stack-item[data-gs-width="1"] { width: $tile-width; min-width: $tile-width; max-width: $tile-width; } .grid-stack-item { <strong i="9">@for</strong> $i from 1 through 20 { &[data-gs-x='#{$i}'] { left: $i * $tile-width; } } }
конструктор:
const width = $('.grid-stack').outerWidth(); this.grid = $('.grid-stack').gridstack({ auto: false, cellHeight: 80, disableResize: true, verticalMargin: 0, width: Math.round(width/100), height: 1, disableOneColumnMode: true }).data('gridstack');
Сбросить ширину в обработчике изменения размера
resizeHandler() { const width = $('.grid-stack').outerWidth(); const grid = $('.grid-stack').data('gridstack'); grid.setGridWidth(Math.round(width/100), true); }
Хакерство заключается в том, чтобы принудительно установить для cellWidth значение 100 пикселей (как установлено в CSS), регулируя ширину (количество столбцов) на основе текущей ширины сетки (пикселей).

Вы можете установить для cellHeight все, что захотите, и вы можете использовать Javascript для определения размеров перед созданием контейнера и передачей параметров в gridstack. Таким образом, вы можете установить любое соотношение, которое хотите, и даже установить конкретную ширину и высоту в пикселях.