CODEWITHSUNDEEP
csstwitter-bootstrapdropdownopacity
user3642066
user3642066

Reputation: 65

Bootstrap (on Laravel) - Header dropdown becomes transparent on one page

I seem to have an issue with one of my pages I'm trying to layout. I implemented FullCalendar and added it to one of my pages/views, I'm now noticing that my header dropdown when it overlays on top of where the calendar begins -- the dropdown isn't opaque/forced overtop of the underlaying content like how it is on all other pages. Attached is the example of what is happening.

Any ideas? If I should be posting my CSS let me know. It's the default for FullCalendar & Bootstrap with no modifications.

Here is the view HTML/classes applied to the content it's not drawing 'over/on top of':

@section('content')
@include('layouts.headers.cards')
<div class="container-fluid mt--7"> 
    <div class="row">
        <div class="col">
            <div class="card shadow">
                <div class="card-header border-0">   
                        <div class="col-14">
                            <div id='calendar'></div>  
                        </div>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.footers.auth')
</div>
@endsection

Dropdown background not opaque

Upvotes: 0

Views: 144

Answers (1)

BennKingy
BennKingy

Reputation: 1593

#calendar{
  z-index: 999999;
  position: relative;
}

<< That should fix it!

Read: https://www.w3schools.com/cssref/pr_pos_z-index.asp

Upvotes: 1

Related Questions