My goal is to create a custom dropdown menu with a large number of dynamically changing options. These options are added using jQuery, making them dynamic as well.
The challenge I'm facing is how to make this dropdown responsive so that it can occupy the full width of the browser. This will ensure that all the options are easily viewable on any screen size.
Currently, the dropdown spans the full width of a column (col-md-6), but my desired outcome is for it to overlay on top of other columns and expand to the full width of the browser while still being relative to the city button clicked.
I've attempted to use Bootstrap megamenu without success, as it doesn't automatically span the full width unless declared within the nav element.
<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>
The provided image shows my current setup and the desired end result.