Bootstrap drop-down in header and css

Event calendars & schedulers
1

Hi,
hope you can help.

I tried to integrate a bootstrap Button-Dropdown in the header.
But dow dropdown list is under the calender.
I thought i can fix it with z-index, but nothing works.
Do you have a sample how the css must look like ?

Thanks and best regards.
Markus

2

??? Ok…
i tried a little bit around and in day/week view the select is under the calender.
But in month / year view not!

My Dropdown div :

<div class="btn-group dropup">
  <button type="button" class="btn btn-outline-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">+W</button>
  <div class="dropdown-menu fixsample">
	<a class="dropdown-item" href="#" id="btnPlus1W">+ 1 Woche</a>
	<a class="dropdown-item" href="#" id="btnPlus2W">+ 2 Wochen</a>
	<a class="dropdown-item" href="#" id="btnPlus3W">+ 3 Wochen</a>
	<a class="dropdown-item" href="#" id="btnPlus4W">+ 4 Wochen</a>
  </div>
</div>

grafik
grafik729×315 17.2 KB

grafik
grafik729×315 11.7 KB

3

Hi Markus,

I’m pasting the answer from the other thread here as well:

looks like this is a z-index problem, but the z-index update needs updated in an upper level on the dom tree to work. Here is the css which help me display the dropdown menu correctly:

.my-calendar-class .mbsc-calendar-wrapper {
   z-index: 4;
}