Почему при смене класса меняется местоположение блока?

Question

[ayapergenov]

Переношу верстку на Битрикс. На странице каталога есть 2-ной способ представления товаров. В виде блоков и в виде списка.
Вот исходный шаблон страницы каталога. (Смотрите страницу категории)
При верстке компонента продублировал вызов кода товаров и прописал соответствующее имя вызова.
Вот код страницы каталога на Битрикс
Переключение происходит через jquery

$('#list').click(function()
	{	
		$('.grid').fadeOut()
		$('.list').fadeIn()
	});

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

Answer 1

[Егор]

div с классом col-lg-9 надо в блок row перенести. Либо в одном блоке col-lg-9 надо делать два блока со списками скрывать или открывать их при переключении.

Comments

[ayapergenov]

В простом html я бы так и сделал. А тут же все с php связано. Непонятно что куда переносить.

[Егор]

ну так надо код смотреть. В чем проблема вывести также список два раза с разными стилями и один скрыть? как в оригинальном шаблоне

[ayapergenov]

Вот код из 3 файлов. https://yadi.sk/d/gIVlQ_0yiQ8SM
catalog.top.section.default.php - код компонента первоначального вида с корректным положением
catalog.top.section.top-list.php - код компонента с неправильной позицией
catalog.sections.php - код вызова 2 компонентов.

[ayapergenov]

Я тоже так думаю, в чем проблема, если код одинаковый. Прописываю смену класса, а он улетает в другой ряд.

[Егор]

ayapergenov: Как я понял вы два раза компонент вызываете с разными шаблонами. Вам нужно вызывать один компонент и в его шаблоне выводить два раза список с разными стилями.

[Егор]

ayapergenov: ну или как вариант можно просто вывести список один раз и менять у блока в котором список находится стиль по клику

[ayapergenov]

На странице код компонента 1. А вызов в файле catalog.sections.php происходит 2жды. Чтобы обращение было к разным папкам catalog.top.section.default.php и catalog.top.section.top-list.php соответственно.
В первом случае вызвается
default
"bitrix:catalog.top",
"",
А во втором
"bitrix:catalog.top",
"top-list",

[ayapergenov]

DarkSir: Тут дело не только в стилях. Здесь идет привязка к разным папкам кода компонента у которых планируется разная верстка

[Егор]

Ладно я все равно не понял смысл так делать. Попробуй те в файле catalog.top.section.default.php последний закрывающий div убрать, в самом конце. Может встанет тогда на место

[ayapergenov]

DarkSir: Спасибо большое, помогло. Я ставил эти закрывающие div, чтобы не подвал растягивался по всей ширине экрана.

[Егор]

он скорее всего и так не должен растянуться т.к. в catalog.top.section.top-list.php должен быть закрывающий div. Но тут изначально я думаю можно проще сделать

[ayapergenov]

В catalog.top.section.top-list.php тоже есть лишне закрывающие теги. Получается я сам себе грабли положил. Целый день вчера потерял из-за этого. Думаю надо эти закрывающие теги перенести в файл footer.
Как сделать изначально проще я пока не знаю, опыта маловато. Мне там посоветовал знакомый Битрикс программист. Он исходил из того, как это реализовано в html верстке шаблона.

[ayapergenov]

DarkSir: Footer как раз должен тянуться.

[Егор]

ayapergenov: Если у вас в футоре закрывается div.container то можно перенести закрывающий div.row туда. Только при этом в catalog.top.section.top-list.php также нужно удалить закрывающий div