1

I have a Student Add form built using bootstrap 5

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Add Student</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form action="{% url 'student-add' %}" method="post" enctype="multipart/form-data">
        <div class="modal-body">
          {% csrf_token %} {{ form | crispy }}
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">
                                        <i class="fa fa-save"></i> Save changes
                                    </button>
        </div>
      </form>
    </div>
  </div>
</div>

even though I added the scrollable in separate or instead of modal-dialog div, it just stays in middle of the page but it is not scrollabe

Shaheem PP
  • 625
  • 1
  • 5
  • 13

1 Answers1

2

Wrong:

<form action="{% url 'student-add' %}" method="post" enctype="multipart/form-data">
  <div class="modal-body">
    {% csrf_token %} {{ form | crispy }}
  </div>
</form>

Correct:

<div class="modal-body">
  <form action="{% url 'student-add' %}" method="post" enctype="multipart/form-data">
    {% csrf_token %} {{ form | crispy }}
  </form>
</div>

See the snippet below.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Add Student</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form action="{% url 'student-add' %}" method="post" enctype="multipart/form-data">
          {% csrf_token %} {{ form | crispy }}
        </form>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget magna fermentum iaculis eu non diam. Id diam maecenas ultricies mi. Ultrices vitae auctor eu augue ut lectus arcu bibendum
          at. Sollicitudin nibh sit amet commodo nulla. Curabitur vitae nunc sed velit dignissim sodales. Habitant morbi tristique senectus et netus et malesuada fames. Nec nam aliquam sem et. Scelerisque fermentum dui faucibus in ornare quam viverra
          orci. Cras tincidunt lobortis feugiat vivamus at augue eget. Luctus accumsan tortor posuere ac ut consequat semper viverra nam. Proin sed libero enim sed faucibus turpis in eu mi. Sit amet consectetur adipiscing elit ut aliquam. Lacus suspendisse
          faucibus interdum posuere lorem ipsum. Parturient montes nascetur ridiculus mus mauris. Pellentesque habitant morbi tristique senectus et netus et. Lectus urna duis convallis convallis tellus id interdum velit laoreet. Vitae suscipit tellus
          mauris a diam maecenas sed enim. Fermentum et sollicitudin ac orci phasellus. Tellus elementum sagittis vitae et leo duis. Elementum pulvinar etiam non quam lacus. Sem nulla pharetra diam sit amet nisl suscipit. Condimentum mattis pellentesque
          id nibh tortor id aliquet lectus proin. Sit amet nisl suscipit adipiscing bibendum est. Sit amet risus nullam eget felis eget nunc. Lorem dolor sed viverra ipsum nunc aliquet bibendum. Lorem donec massa sapien faucibus et molestie ac feugiat.
          Lorem sed risus ultricies tristique. Ipsum suspendisse ultrices gravida dictum fusce ut. Facilisi nullam vehicula ipsum a arcu cursus. Lacus luctus accumsan tortor posuere. Netus et malesuada fames ac. Ultrices gravida dictum fusce ut placerat.
          Tempor orci eu lobortis elementum. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Enim lobortis scelerisque fermentum dui faucibus. Diam phasellus vestibulum lorem sed risus ultricies tristique. Pellentesque elit eget
          gravida cum sociis natoque penatibus. Scelerisque in dictum non consectetur a erat nam at lectus. Ut tortor pretium viverra suspendisse. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu vitae. Eget sit amet tellus cras adipiscing
          enim eu turpis egestas. Posuere sollicitudin aliquam ultrices sagittis. Sed viverra ipsum nunc aliquet bibendum. Sed viverra ipsum nunc aliquet bibendum enim. Urna duis convallis convallis tellus id interdum velit. Sodales ut eu sem integer
          vitae justo. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed. Erat velit scelerisque in dictum non consectetur a erat. Eget arcu dictum varius duis
          at consectetur. Elit duis tristique sollicitudin nibh sit. Nunc sed augue lacus viverra vitae congue eu. Lectus sit amet est placerat. Nisi vitae suscipit tellus mauris. Facilisi cras fermentum odio eu feugiat pretium. Ornare arcu dui vivamus
          arcu felis. Sodales ut eu sem integer vitae justo. Odio aenean sed adipiscing diam donec adipiscing tristique. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Eget arcu dictum varius duis at consectetur. Magna eget est lorem
          ipsum dolor. Consectetur adipiscing elit duis tristique. Sit amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Pellentesque habitant morbi tristique senectus. Aliquet lectus proin nibh nisl. Turpis egestas maecenas pharetra convallis
          posuere. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin gravida. Adipiscing tristique risus nec feugiat. Feugiat pretium nibh ipsum consequat
          nisl vel. Consectetur adipiscing elit pellentesque habitant morbi tristique. Tincidunt lobortis feugiat vivamus at augue eget arcu. Auctor neque vitae tempus quam pellentesque nec nam. Purus semper eget duis at tellus at urna. Eu scelerisque
          felis imperdiet proin fermentum leo vel.
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">
          <i class="fa fa-save"></i> Save changes
        </button>
      </div>
    </div>
  </div>
</div>
Rok Benko
  • 14,265
  • 2
  • 24
  • 49