Клуб API Карт

Неправильное определение высота балуна (height balloon) и как с этим бороться.

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

Недавно сталкнулся с проблеймой неправльного расчета высоты балуна.

Проблема появилась только когда стал выводить карту через JQuery BlockUI.

Проверял в Google Chrome, IE, Safari и FF.

Проблема присутствует только в браузере Mozilla FireFox

Скриншот проблемы в FF:

 

Проанализировав код через FireBug были реализованы следующие идеи:

  1. С помощью jquery находить класс балуна и задавать ему высоту. (не помогло)
  2. Высчитывание суммы, которая складывается из высот каждого элемента в контексте балуна. (решило проблему, но не так как хотелось)
  3. Задание стиля в css-файле, который получает страница до открытия карты. (решило проблему)


Суть решения заключается в следующем:

Дописываем в разметку для своей страницы следующий стиль: 

.YMaps-b-balloon-content{height:100%!important;}

В классе "YMaps-b-balloon-content" как раз-таки и хранится высота балуна, которая высчитывается "мозгом" Яндекс-карт.


Скриншот в FF:


Так же если кому-то не нравится наличие отступа для кнопки закрытия балуна (смотрите скриншот ниже),

то эту проблему можно решить опять-таки дописав ещё один стиль для класса в css:

.YMaps-b-balloon_close-on .YMaps-b-balloon-content {margin-right:0;}


Итог:


P.S. конечно же, это не решение всех проблем, так как

это всего на всего css-хаки
и возможно этих классов не будет в следующих версиях Яндекс-карт, и эта тема была создана лишь для экономии времени тех людей, которые столкнулись с подобным. Так что, пока всё работает, то этими css-хаками можно пользоваться