Блог

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

Поэтому я хочу, чтобы раскрывающийся список занимал всю ширину браузера (отзывчивый), чтобы многие параметры были лучше видны в браузере

В настоящее время выпадающий список занимает всю ширину столбца (col-md-6), но я хочу, чтобы он накладывался поверх других столбцов на всю ширину браузера, но все равно был относительно нажатой кнопки города

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

 <style>
    .dropdown{
        position:relative;
    }
    .dropdown_content{
        z-index: 1000;
        position: absolute;
        width: 100%;
        right:0;
        left: 0;
        height: 200px;
    }
</style>

<div class="col-md-3">
    <!-- City -->
    <div class="form-group">
        <label for="lender_city_id">City</label>
        <div class="dropdown btn btn-light text-dark w-100 d-flex justify-content-between">City <span class="fas fa-caret-down"></span></div>
    </div>
    {{--Cities Mega menu dropdown--}}
    <div class="dropdown_content mb-3 bg-dark text-light">
</div>
 

Изображение ниже показывает, что у меня есть и чего мне нужно достичь.

Удалите position: relative из выпадающего списка, добавьте его в основную строку. пожалуйста, проверьте, есть ли какое-либо position: relative свойство в столбце или форме-контроль.