Как поправить верстку меню в шаблоне Bootstrap-4?

Question

[SteepNET]

Добрый день! В умном фильтре в шаблоне Bootstrap-4 выпадающее меню не во всю ширину select ,это очень сильно портит картину, нигде не могу найти как исправить...
В коде начиная с //region DROPDOWN +
В css * Select popup
width: 100%; в .smart-filter-dropdown-popup не помогает!
Отладчиком выяснил что подключается системный файл core_popup.css
Из /home/bitrix/www/bitrix/js/main/core/css/core_popup.css

В нем уже подключается стиль

.popup-window {
	background-color: #fff;
	box-shadow: 0 7px 21px rgba(83, 92, 105, .12), 0 -1px 6px 0 rgba(83, 92, 105, .06);
	padding: 10px;
	font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}

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

Comments

[Ярослав Александров]

скриншот покажите ничего не понятно из вашего вопроса

[SteepNET]

Ярослав Александров, Вот видно что выпадающее меню меньше чем сам селектор , можно его конечно довести px значениями но это ненужно потому как на мобильных устройствах тогда ломается все. Нужно просто 100% ширины селектора

[Ярослав Александров]

SteepNET, это всё решается вёрсткой. Маловероятно, что вам без ссылки на сайт или вёрстку помогут в этом вопросе.

[xonar]

Попробуйте задать flex: 0 0 100%, а лучше выложите на codepen

[SteepNET]

xonar, Это даже на codepen не смоделировать, потому что это Битрикс, он подключает системные стили...
Но я все же выложил весь код..
https://codepen.io/SteepNET/pen/eYmBqoo

Вот этот стиль .popup-window как раз подхватывается системой ,и применяется

[xonar]

SteepNET, Если это точно вы нашли системный файл, который потом и подменяет стили, то всё должно сработать. Но, как я вижу, он перебивает display: flex; значит не совсем там меняете, так как он в разметку добавляет в style="display: block;" попробуйте понять откуда это тянется точно. Где-то в JS это лежит скорее всего.

[PetrPo]

Еще не решил проблему?

[SteepNET]

Нет ещё, переключился на другую задачу, но эту тоже надо решить..

[PetrPo]

В файле script.js шаблона фильтра функция JCSmartFilter.prototype.showDropDownPopup (где-то после 400 строки)
добавь параметр
width: element.offsetWidth
после content: BX.clone(contentNode),

После этой функции добавь событие

BX.addCustomEvent('onPopupWindowIsInitialized', function(uniquePopupId, element) {
	window.addEventListener('resize', function() {
		element.setWidth(element.bindElement.offsetWidth);
	});
});

[SteepNET]

PetrPo, Браво! То что нужно!

[SteepNET]

PetrPo, Можно узнать такой вопрос, поскольку ты в курсе происходящего..
Встречалось на некоторых сайтах в выпадающих списках чекбоксы, тоесть в выпадающем списке можно выбрать несколько значений и фильтр это учитывал при фильтрации.
Это тоже JS ? Или фильтр переписывается в корне?

[PetrPo]

http://joxi.ru/Dr8Qvlotoxdgqm
http://joxi.ru/bmoMkGBf3awgpA
http://joxi.ru/l2ZW1d3tzKBPOA

В последнем скрине можно выбрать флажки = чекбоксы станет вот так http://joxi.ru/KAx6VKgtZdpkLm
Можно сделать чтобы список чекбоксов выпадал, например, при клике по названию свойства, тогда надо css дописать будет и несколько строк js.

[SteepNET]

PetrPo,
Вот что я имел ввиду,выбрать из выпадающего списка сразу несколько значений, это реально в текущей системе?

[PetrPo]

Думаю это highload
Делаешь highload блок, потом создаешь свойство в своем ИБ тип справочник, остальное как на предыдущих скриншотах, только там появится вид в умном фильтре - флажки с названиями и картинками.
То что сверху пишется "3 вида" и строчка "Любая" видимо кастомизация, сделать не сложно, но придется js немного полопатить

Answer 1

[Keyn Din]

width: 100% !important;?