Topic: carousel zoom stop working after datetimepicker change
dartseng premium asked 2 years ago
Expected behavior
Actual behavior I have an issue regarding datetimepicker and carousel. In a page there are carousel and datetimepicker. Everything works fine until I change time in datetimepicker. After that, zoom con carousel stop working.
Resources (screenshots, code snippets etc.)
<div class="row">
<div class="col-md-12"> </div>
</div>
<div class="row">
<div class="col-6">
<div id="carousel_controls_id" class="peopleCarouselImg carousel slide carousel-dark">
<div class="carousel-inner lightbox" id="img_carousel_id">
<div class="carousel-item active" data-mdb-interval="10000">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/041.webp" class="d-block w-100" alt="Wild Landscape" />
</div>
<div class="carousel-item" data-mdb-interval="2000">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/042.webp" class="d-block w-100" alt="Camera" />
</div>
<div class="carousel-item">
<img src="https://mdbcdn.b-cdn.net/img/new/slides/043.webp" class="d-block w-100" alt="Exotic Fruits" />
</div>
</div>
<button class="carousel-control-prev" type="button" data-mdb-target="#carousel_controls_id"
data-mdb-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-mdb-target="#carousel_controls_id"
data-mdb-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="col-6">
<div class="form-outline datetimepicker">
<input type="text" class="form-control" value="22/12/2020, 14:12:56" id="datetimepickerExample" />
<label for="datetimepickerExample" class="form-label">Select Date and Time</label>
</div>
</div>
</div>
nic.butler free answered 1 year ago
We are seeing the same problem - the Side Nav menu stops show hide after the timepicker model closes. This code in the timepicker looks like the culprit that unhooks all events from the document:
EventHandlerMulti.off( this._document, 'click keydown mousedown mouseup mousemove mouseleave mouseover touchmove touchend' );
Kamila Pieńkowska staff answered 2 years ago
I pasted your code into snippet and it works fine.
https://mdbootstrap.com/snippets/standard/kpienkowska/4347662
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.1
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No