Scroll Modal Full Height Right

Topic: Scroll Modal Full Height Right

itdev pro asked 5 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">

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

<p>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.</p>

<pre class="prettyprint"><code><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>
</code></pre>

Please insert min. 20 characters.

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>

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

<p>Dear <a href="/profile/?id=30951" target="_blank" rel="nofollow">@itdev</a></p>

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

<p>Also please specify on which browser your problem exists - on every browser? Or some specific?</p>

<p>Did you tried to update your app to the latest MDB Angular? Currently 7.5.2</p>

<pre class="prettyprint"><code><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>
      </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>
</code></pre>

<p>Best Regards,</p>

<p>Damian</p>

Please insert min. 20 characters.

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

Add comment

itdev pro answered 5 years ago

0 0 Best answer

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">

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

itdev

Pro User 124Support score
19Questions 10Answers 0Snippets