Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: modal Fluid Right

Aroquiassamy LA ROZE priority asked 5 years ago


Hi @Damian

Actually I'm using Modal Fluid Right

Expected behavior

On your page when it comes to Tab and below devices the modal goes to center

Actual behavior

But for me It stays in right and some content goes hidden

Resources (screenshots, code snippets etc.)

  <div mdbModal #abc="mdbModal" class="modal fade right" id="frameModalTop" tabindex="-1" role="dialog"
  aria-labelledby="myModalLabel" aria-hidden="true" [config]="{backdrop: false, ignoreBackdropClick: true}">
  <div class="modal-dialog modal-full-height modal-right modal-notify modal-info" role="document">
    <div class="modal-content">
      <div class="modal-header ">
        <p class="heading lead">ABCCC
        </p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="abc.hide()">
          <span aria-hidden="true" class="white-text">×</span>
        </button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nesciunt officia ipsa quo officiis odit
        dignissimos ipsam, error consequatur nostrum corrupti eaque voluptates hic vel dolor nemo autem aliquam
        repellat!
      </div>
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="primary" class="waves-light" mdbWavesEffect>Send
          <i class="fas fa-paper-plane ml-1"></i>
        </a>
        <a type="button" mdbBtn color="primary" outline="true" class="waves-effect" data-dismiss="modal" mdbWavesEffect
          (click)="abc.hide()">Cancel</a>
      </div>
    </div>
  </div>
</div>

The Modal stays right and it hide content from my site

This image is from your site

Tell me what I did wrong..?


Damian Gemza staff answered 5 years ago


Dear La Roze,

Please try to add the below styles to your styles.scss file, and check, if the problem with cutting the modal on smaller devices is gone.

.modal .modal-full-height {
  width: unset;
  max-width: 400px;
}

Best Regards,

Damian



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: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 7.4.3
  • Device: Lenova
  • Browser: Chrome 73
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags