Bootstrap 4 Modal scrolling not working after adding input from DOM jQuery

Question

I am using Bootstrap 4 Modal and I have a UI something like this.

As you can see, I have Questions label and Add Question and by cliking on Add Question I can add new input boxes through jQuery. Here is my code how I am adding my new question.

$(document.body).on("click",".addSingle",function(){

       var appendX = '<div class="actionBtn"><div class="BtnIcon removeBtn removeSingle" title="Delete this choice."><svg class="svd-svg-icon" style="width: 16px; height: 16px;"><use xlink:href="#icon-inplaceplus"><symbol viewBox="0 0 12 12" id="icon-inplaceplus"><path d="M11 5H7V1H5v4H1v2h4v4h2V7h4z"></path></symbol></use></svg></div></div>';


       $(this).closest(".question_editable").find(".question:first").clone().find("input:text").val("").end().insertAfter($(this).closest(".question_editable").find(".question:last")).append(appendX);





   });

Now the thing is, as soon as I add more questions, I can see scroll but I am unable to scroll down. Here is how the UI looks like when I am adding more questions.

As you can see above, I am not able to see Add Question text anymore because my Scroll not working however its showing.

Now when I click on Edit Question and re-open the Edit Question modal which is another file with same modal code only modal id is different, its working fine like this.

Here in Edit Question I can add questions and my scroll also working fine. So my though is my Add Question modal having some problem however my modal popups for Add Question and Edit Question modal question code structure is same.

Here is my Add Question modal popup same code looks like.

<div class="modal fade" id="questionModal" tabindex="-1" role="dialog" aria-labelledby="questionModal"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Add Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Add</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

I have tried various options (Bootstrap Modal Issue - Scrolling Gets Disabled) by adding .modal { overflow-y:auto; } but it doesnt work for me.

Snd here is my Edit Question HTML markup looks like.

<div class="modal fade" id="questionModalEdit" tabindex="-1" role="dialog" aria-labelledby="questionModalEdit"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modalcustom" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title">Edit Question</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <form role="form" method="POST" action="" novalidate id="questionModalEditfrm">
            @csrf
            <div class="modal-body">
            </div>
            <div class="modal-footer">
               <button type="submit" class="btn btn-br-success  btn-s-md  waves-effect waves-light">Save</button>
               <button type="button" class="btn btn-danger  btn-s-md  waves-effect waves-light" data-dismiss="modal">Cancel</button>
            </div>
         </form>
      </div>
   </div>
</div>

Can someone guide me what can I do to solve this ?

@EternalHour yes its only same code for both `add` and `edit` question pages. So I dont think its causing issue hence I didnt put here in my question. — Mittul At TechnoBrave, Sep 13 '19 at 06:09
I asked to see it because I think the issue may be `clone()`. If you are cloning ids it could cause unexpected problems. — EternalHour, Sep 13 '19 at 06:12
but its not causing problems while editing a questions its working fine .. — Mittul At TechnoBrave, Sep 13 '19 at 06:16
Well that's great....but obviously something is causing the problem :) Also make sure you are destroying previous models when creating new ones. — EternalHour, Sep 13 '19 at 06:18

score 0 · Answer 1 · answered Sep 13 '19 at 05:52

Would have been helpful if you could replicate something similar in jsfiddle for others to check what's causing the issue.

One option you could try is to have overflow only to your "questions" section rather than your modal and see if that works as expected.

Bootstrap 4 Modal scrolling not working after adding input from DOM jQuery

1 Answers1