Modal window scrolling

I have resolved the issue.

I added the style

.modal-dialog {
overflow-y: auto;
pointer-events: initial;
}

The overflow-y:auto allowed to scroll the window with the mouse wheel
The pointer-events:initial allowed to use the scroll bar.

The standard settings of MD Bootstrap was pointer-events: none I fail to understand why this was done, but overwriting it to initial resolved the issue.

The modal window involved:

<div class="modal fade show modal-scrolling" id="TheFilter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="padding-right: 17px; display: block;">
<div class="modal-dialog modal-md modal-side modal-top-right modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<button id="close" type="button" class="btn btn-primary pull-right closeFilter p-2 waves-effect waves-light" data-dismiss="modal" aria-hidden="true" style="font-size: 1rem">
<span style="padding-left: 9px; vertical-align: top;">Sluiten</span>
</button>
<h4 class="modal-title" id="myModalLabel">Filter instellen</h4>
</div>
<!--Body-->
<div class="modal-body">
<div class="well" style="padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
<h5>Aantal Plaatsen</h5>
<div class="d-flex justify-content-between">
<div class="md-form" style="width: 33%">
<input name="ctl00$ContentPlaceHolder1$MinPlaatsen" type="text" id="ContentPlaceHolder1_MinPlaatsen">
<label for="ContentPlaceHolder1_MinPlaatsen" class="">Minimaal</label>
<span id="ContentPlaceHolder1_ctl00" style="color:Red;display:none;">De waarde moet een heel getal zijn tussen 0 en 3000</span>
</div>
<div class="md-form" style="width: 33%">
<input name="ctl00$ContentPlaceHolder1$MaxPlaatsen" type="text" id="ContentPlaceHolder1_MaxPlaatsen">
<label for="ContentPlaceHolder1_MaxPlaatsen" class="">Maximaal</label>
<span id="ContentPlaceHolder1_ctl01" style="color:Red;display:none;">De waarde moet een heel getal zijn tussen 0 en 3000</span>
</div>
</div>
<h5>Periode</h5>
<div class="d-flex justify-content-between">
<div class="input-daterange input-group" id="datepicker" style="margin-left: auto; margin-right: auto">
<span class="input-group-addon" style="margin-top: 3px; background-color: #4285F4 !important; color: white">Van</span>
<input name="ctl00$ContentPlaceHolder1$startdate" type="text" readonly="readonly" id="ContentPlaceHolder1_startdate" class="input-md form-control" placeholder="datum" style="background-color:#E9ECEF;cursor: pointer; padding: 10px 5px 11px 5px; border-bottom: 1px solid #bdbdbd;">
<span class="input-group-addon" style="margin-top: 3px; background-color: #4285F4 !important; color: white">Tot</span>
<input name="ctl00$ContentPlaceHolder1$enddate" type="text" readonly="readonly" id="ContentPlaceHolder1_enddate" class="input-md form-control" placeholder="datum" style="background-color:#E9ECEF;cursor: pointer; padding: 10px 5px 11px 5px; border-bottom: 1px solid #bdbdbd;">
<span id="trashdates" class="input-group-addon" style="margin-top: 3px; background-color: #4285F4 !important; color: white"><i id="fa-trash" class="fa fa-trash" style="color:white"></i></span>
</div>
</div>

<span>Water</span><ul class="list-group" style="margin-bottom: 0px;"><li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl00$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_0" class="form-check-input" data-optie="Aquapark">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_0">Aquapark</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl01$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_1" class="form-check-input" data-optie="Waterglijbaan">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_1">Waterglijbaan</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl02$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_2" class="form-check-input" data-optie="Overdekt zwembad">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_2">Overdekt zwembad</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl03$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_3" class="form-check-input" data-optie="Verwarmd zwembad">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_3">Verwarmd zwembad</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl04$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_4" class="form-check-input" data-optie="Buiten zwembad">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_4">Buiten zwembad</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl05$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_5" class="form-check-input" data-optie="Kleuterbad">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_5">Kleuterbad</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl06$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_6" class="form-check-input" data-optie="Waterspeeltuin">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_6">Waterspeeltuin</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl07$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_7" class="form-check-input" data-optie="Strand (zee/meer/rivier)">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_7">Strand (zee/meer/rivier)</label></div></li>

</ul><span>Service</span><ul class="list-group" style="margin-bottom: 0px;"><li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl08$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_8" class="form-check-input" data-optie="Vaatwasser">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_8">Vaatwasser</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl09$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_9" class="form-check-input" data-optie="Wasmachine">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_9">Wasmachine</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl10$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_10" class="form-check-input" data-optie="Wasdroger">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_10">Wasdroger</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl11$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_11" class="form-check-input" data-optie="PriveSanitair">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_11">PriveSanitair</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl12$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_12" class="form-check-input" data-optie="Accomodatie verhuur">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_12">Accomodatie verhuur</label></div></li>

</ul><span>Huisdieren</span><ul class="list-group" style="margin-bottom: 0px;"><li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl13$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_13" class="form-check-input" data-optie="Huisdieren toegestaan">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_13">Huisdieren toegestaan</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl14$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_14" class="form-check-input" data-optie="Huisdieren toegestaan in Accomodatie">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_14">Huisdieren toegestaan in Accomodatie</label></div></li>

</ul><span>Type</span><ul class="list-group" style="margin-bottom: 0px;"><li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl15$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_15" class="form-check-input" data-optie="Naturisten">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_15">Naturisten</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl16$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_16" class="form-check-input" data-optie="Chaletpark">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_16">Chaletpark</label></div></li>

<li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl17$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_17" class="form-check-input" data-optie="SVR camping">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_17">SVR camping</label></div></li>

</ul><span>Diverse</span><ul class="list-group" style="margin-bottom: 0px;"><li class="list-group-item"><div class="form-check">
<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl18$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_18" class="form-check-input" data-optie="Campingcard">
<label class="form-check-label" for="ContentPlaceHolder1_Repeater1_CheckBox1_18">Campingcard</label></div></li>


<input name="ctl00$ContentPlaceHolder1$Repeater1$ctl19$CheckBox1" type="checkbox" id="ContentPlaceHolder1_Repeater1_CheckBox1_19" class="form-check-input">




<div style="margin-top: 10px;" class="d-flex justify-content-between">
<div class="waves-input-wrapper waves-effect waves-light"><input type="button" name="ctl00$ContentPlaceHolder1$btnToepassen" value="Toepassen" onclick="opslaan(); return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnToepassen&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ContentPlaceHolder1_btnToepassen" class="btn btn-primary p-2" data-dismiss="modal" style="font-size: 1rem"></div>
<div class="waves-input-wrapper waves-effect waves-light"><input type="button" name="ctl00$ContentPlaceHolder1$btnVerwijderen" value="Verwijderen" onclick="verwijderen(); return-false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$btnVerwijderen&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, true))" id="ContentPlaceHolder1_btnVerwijderen" class="btn btn-primary p-2" data-dismiss="modal" style="font-size: 1rem"></div>
</div>
</ul></div>
</div>
</div>
</div>
</div>