Карта некорректно ресайзится, когда находится внутри ячейки таблицы

Пост в архиве.

avtodispetcher

14 мая 2015, 17:16

При расширении окна браузера карта пропорционально увеличивается.

При сужении окна браузера карта не уменьшается пропорционально, а сохраняет прежнюю ширину.

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

Документация утверждает, что контейнер карты должен быть блочным элементом. Но оборачивание в блочный элемент не решает проблему.

Похоже, что либо документация не точна (необходимо, чтобы все родители контейнера карты были блочными элементами), либо это баг.

Для сравнения, вот как тянутся картинки в аналогичной ситуации и вот как тянутся гуглокарты.

4 комментария

Авторизуйтесь, чтобы оставить комментарий

avtodispetcher

27 января 2016, 22:45

Уважаемые разработчки карты, пожалуйста, дайте знать о статусе. Мой багрепорт принят? Или фикса ждать не стоит? Или это не баг, а я что-то делаю не правильно?

Заменить родной "резиновый" ресайз средствами javascript (через принудительное изменение размеров контейнера + map.container.fitToViewport) довольно проблематично.

thekashey

27 января 2016, 22:45

Это больше не баг, а фича. В отличие от гугла наши внутрение "механизмы" задают карте размеры в пикселях. После чего карта становиться "распоркой" для таблицы.

Хорошего решения проблемы - нет. Но есть вот такое https://jsfiddle.net/3kLezee8/1/

1. Установить карте опцию autoFitToViewport: false
2. При ресайзе окна(или на основе своей логики) - устанавливаем карте 100% ширины и запускаем пересчет.

Разница в том, что "мы" 100% ширины не ставим - это очень "жестоко" с точки зрения производительности.

avtodispetcher

27 января 2016, 22:45

Спасибо, предложенное Вами javascript-решение работает отлично!

Константин Николаев

11 октября 2017, 20:20

Теперь решение такое:

window.onresize = function(event) {
yaMap.container._element.style.width = '100%';
yaMap.container.getElement().style.width = '100%';
yaMap.container.fitToViewport();
};