-1

I need to display a custom dropdown with very many options. All the options are Dynamic and the rows of data are also dynamic - Added using jquery.

I want therefore to have the dropdown occupy full width of the browser (Responsive) so that the many options are better viewable on the browser

Currently, the dropdown takes full width of the column (col-md-6) but I want it to overlay on top of the other columns full width of the browser but still be relative to the city button clicked

I have tried using bootstrap megamenu but even it does not span full width unless declared on the nav.

<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>

Image below shows what I have and what I need to achieve.

enter image description here

Lefty
  • 1,192
  • 13
  • 18

1 Answers1

-1

Remove position: relative from the dropdown add it to main row. please check if there is any position: relative property in column or form-control.

Mohammed Yousuff
  • 122
  • 1
  • 1
  • 9