How to enable scrolling in "izimodal"?

Question

I wants to show some data on a modal inside table. I'm using an "izimodal" and when table appends inside the modal, it cannot scroll and gets stuck on the position as it's fixed. I wants to enable scrolling on y axis. how can this issue be solved?

//Izimodal properties
    $('#booking-modal').iziModal({
      headerColor: '#00a657', 
      width: '60%', 
      overlayColor: 'rgba(0, 0, 0, 0.5)', 
      fullscreen: true, 
      transitionIn: 'fadeInDown', 
      transitionOut: 'fadeOutUp',
      fullscreen: false,
      openFullscreen: false
    });

Do you mean you want scroll inside the modal? – showdev Jun 18 '19 at 05:37 — showdev, Jun 18 '19 at 05:37

Mehdi Jannati · Answer 1 · 2019-06-18T06:07:33.730

1

use this scenario to appeal scroll in your izimodal: in your css file you can define a CSS class with set overflow for scrolling:

you can use overflow attribute to working with scrolling in your page. I send a example for you to use that

.scrolling{overflow:auto;}
.scrollingY{overflow-y:visible;}
.scrollingX{overflow-x:hidden}

after you define this class you can use this css class in your Html tag with izimodal class like this:

<div class="izimodal scrolling">
</div>

I suggest you to use overflow attribute with auto value

edited Jun 18 '19 at 06:07

answered Jun 18 '19 at 05:53

Mehdi Jannati

108
8

use this link in code pen. this code with using izimodal and overflow css attribute. also you can use scroll value instead of visible or hidden. https://codepen.io/anon/pen/xoLopW – Mehdi Jannati Jun 26 '19 at 07:08

How to enable scrolling in "izimodal"?

1 Answers1