JReactor
@JReactor
Учусь в направлении front-end'а

Поехал весь контент в табах, что делать?

Пробовал различные табы, начиная от чистого css и заканчивая бутстраповскими и jQuery.
Как только добавляется больше 90 заказов, контент весь уезжает вниз под сами табы...
+ если подключить пагинацию в компоненте, то в любом случае все будет ехать. Прошлый раз даже спецом отключали её...
Верстка ломается везде, во всех абсолютно. Не понимаю что делать... прошу помочь.
Вот так должны открываться.
spoiler
5abbbcaf633a0942522534.png

Вот что произошло...
spoiler
5abbbcea13a7b939982177.png


Код:
spoiler
5abbbd60b94ad625056142.png


Дальше идет компонент и секция закрывается.
CSS код:
spoiler
.tabs {
	padding: 0;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	color: #aaa;
	background-size: cover;
	border-radius: 3px;
	display: -webkit-box;
	display: -ms-flexbox;
	margin: 0px 12px 23px -40px;
	justify-content: space-around;
	width: 220px;
	min-width: 320px;
	max-width: 800px;
}

/* Стили секций с содержанием */
.tabs>section:not(.content-tab_order) {
	display: none;
	padding: 15px;
	background: #fff;
	margin-left: 36px;
	position: relative;
	border-radius: 7px;
	/*height: auto;*/
	min-width: 862px;
	min-height: 360px;
}

/* Прячем чекбоксы */
.tabs>input {
	display: none;
	position: absolute;
}
/* Стили переключателей вкладок (табов) */
.tabs>label {
	display: inline-block;
	width: 292px;
	margin-left: 52px;
	height: 50px;
	padding: 15px 25px;
	font-weight: 600;
	text-align: left;
	color: #aaa;
	background-color: white;
	border-radius: 6px;
	border-width: 2px 0;
	border-style: solid none;
	border-color: #ebebeb #000 #ebebeb;
}
.tabs>label:hover {
	background-color: #43d7f4;
	cursor: pointer;
}

/* Стили для активной вкладки */
.tabs>input:checked+label {
	color: white;
	border-top: 1px solid #43d7f4;
	border-bottom: 1px solid #fff;
	background: #43d7f4;
}
/* Активация секций с помощью псевдокласса :checked */
#tab1:checked~#content-tab1, #tab2:checked~#content-tab2, #tab4:checked~#content-tab4, #tab5:checked~#content-tab5{
	display: block;
}
#tab3:checked~.content-tab_order, #tab3:checked~#content-tab3{
	display: inline-block;
}
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
JReactor
@JReactor Автор вопроса
Учусь в направлении front-end'а
Решение нашлось! На работе подсказали. Проблема была в самой навигации битрикса

<? echo $arResult["NAV_STRING"];?>

В компоненте: sale personal order list
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
тебя на скринах закрывающий html комментарий не смущает?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы