Позиционирование выпадающего списка для компонента bitrix:search.title

0

09.06.201505:3809.06.2015 05:38:02

Если вы разместили компонент bitrix:search.title в блок с position:fixed, то выпадающий список компонента неправильно позиционируется.
Всё дело в том что компонент использует метод BX.pos, который может неправильно определять позицию фиксированного элемента:

Примечание: Может некорректно работать для элементов с фиксированной позицией (position: fixed) или для их дочерних элементов.

(Документация).

Теперь рецепт: выносим компонент в своё пространство имён, идём по адресу "http://ваш сайт/bitrix/components/bitrix/ bitrix:search.title"
и копируем оттуда файл script.js в наш шаблон. Внутри скрипта находиться функция JCTitleSearch.
Переименовываем эту функцию (например в JCTitleSearchForHeader), далее открываем файл template.php и заменяем

BX.ready(function(){
      new JCTitleSearch({

на

BX.ready(function(){
      new JCTitleSearchForHeader({

теперь идём в сам скрипт и ищём такой код:

this.adjustResultNode = function()
   {
      var pos;
      var fixedParent = BX.findParent(_this.CONTAINER, BX.is_fixed);
      if(!!fixedParent)
      {
         _this.RESULT.style.position = 'fixed';
         _this.RESULT.style.zIndex = BX.style(fixedParent, 'z-index') + 2;
         pos = BX.pos(_this.CONTAINER, true);
      }

меняем его на:

this.adjustResultNode = function()
   {
      var pos;
      var fixedParent = BX.findParent(_this.CONTAINER, BX.is_fixed);
      if(!!fixedParent)
      {
         _this.RESULT.style.position = 'fixed';
         _this.RESULT.style.zIndex = BX.style(fixedParent, 'z-index') + 2;
         //pos = BX.pos(_this.CONTAINER, true);
         pos = _this.CONTAINER.getBoundingClientRect();
      }

Всё, теперь выпадающий список работает корректно.

<Без имени>

09.06.201505:3809.06.2015 05:38:02

Теги: bitrix:search.title, js, битрикс