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">&nbsp;</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


dartseng premium commented 2 years ago

It's strange. I've downloaded a fresh image of MDB5-STANDARD-UI-KIT-Pro-Essential-5.0.0.

modifying the sample index.html file with the code copied from snippet, the problem remains.


dartseng premium commented 2 years ago

any hints about this behaviour?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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