Scroll Modal Full Height Right


Topic: Scroll Modal Full Height Right

itdev pro asked 6 years ago

Expected behavior*Modal should scroll vertically when there are more content to display*Actual behavior*Modal does not scroll vertically when there are lots of content*Resources (screenshots, code snippets etc.)

<div class="modal-dialog modal-dialog-scrollable modal-lg modal-full-height modal-right" role="document">

Arkadiusz Idzikowski staff answered 6 years ago

We will take a closer look at this problem. For now please try to add 'overflow-y: scroll" to the div with mdbModal directive and remove modal-dialog-scrollable class.

<div style="overflow-y: scroll" mdbModal #basicModal="mdbModal" class="modal fade bottom" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-lg modal-full-height modal-right" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close" (click)="basicModal.hide()" mdbWavesEffect>Close</button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
      </div>
    </div>
  </div>
</div>

itdev pro answered 6 years ago

Your solution did not work for my use case. Can you provide a workaround for the following case:

<div class="modal-dialog modal-lg modal-full-height modal-right" role="document">

Damian Gemza staff answered 6 years ago

Dear @itdev

Could you please check one more time, if the below code works for you fine?

Also please specify on which browser your problem exists - on every browser? Or some specific?

Did you tried to update your app to the latest MDB Angular? Currently 7.5.2

<div style="overflow-y: scroll" mdbModal #basicModal="mdbModal" class="modal fade bottom" tabindex="-1" role="dialog"
     aria-labelledby="myBasicModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-lg modal-full-height modal-right" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
          <span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>

        <p class="my-5">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut cupiditate facilis mollitia necessitatibus nihil
          possimus quidem soluta! Ad, aut, eligendi hic ipsa molestiae necessitatibus non pariatur repellendus vel vitae
          voluptas.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" mdbBtn color="secondary" class="waves-light" aria-label="Close"
                (click)="basicModal.hide()" mdbWavesEffect>Close
        </button>
        <button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>Save!</button>
      </div>
    </div>
  </div>
</div>

<button mdbBtn color="primary" (click)="basicModal.show()">Show modal</button>

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

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.4.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: No
  • Provided link: No
Tags