从 DOM jQuery 添加输入后，Bootstrap 4 模态滚动不起作用

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; } .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 ?

Answer 1

Okay. Not sure I get your question entirely but I guess you're trying to keep the content of the modal scrolled to the end at all times. You can just use the JS Scroll API.

container.scrollTop = container.scrollHeight;

where container is the .modal-content

Answer 2

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.