Hey there! Let's get those modals (seatModal and sakuModal) behaving exactly how you want—adapting to your content so you don't need scrollbars to see everything, no matter the screen size. Here's a step-by-step solution tailored to your code:

1. Understand the Root Issue #

Bootstrap modals have default max-width constraints, and your seat layout uses non-wrapping elements combined with overflow-auto, which forces scrollbars when content exceeds the modal's width. We'll fix both the modal container and the internal content layout.

2. Modify Modal HTML Structure #

First, add a custom class (modal-adaptive) to your modal dialogs to override default width behavior, and clean up unnecessary overflow settings:

Updated seatModal Code:

<div id="seatModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-adaptive">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- Your content here -->
      </div>
    </div>
  </div>
</div>

Updated sakuModal Code:

<div id="sakuModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-dialog-centered modal-adaptive">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row" title="-_-_">
          <div class="col-md-12 SeatPanelBody" title="-_-_">
            <div class="SeatPanelSeats" style="width:100%; text-align:center;" title="-_-_">
              <div class="seatRow" title="-_-_" style="display:flex; flex-wrap:wrap; justify-content:center; gap:5px;">
                <div class="seatRowHeader">1</div>
                <span class="seatSold" style="margin:0;" id="76877" t="2" title="سانس : 19:00<br/>جایگاه : میلاد&nbsp;&nbsp;&nbsp;&nbsp;ردیف : 1&nbsp;&nbsp;&nbsp;&nbsp;صندلی : 1<br/>فروخته شده">1</span>
                <!-- Add your other seat elements here -->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Key changes here:

• Added modal-adaptive class to modal-dialog for custom width control
• Removed overflow-auto from SeatPanelBody (no more forced scrollbars)
• Added flex layout with flex-wrap:wrap to seatRow so seats wrap when modal width is too small
• Added width:100% to SeatPanelSeats to ensure it fills the modal's width

3. Add Custom CSS #

Add this CSS to your stylesheet to make the modal adapt to content while staying responsive:

/* Adaptive modal width: fits content, but stays within screen bounds */
.modal-adaptive .modal-dialog {
  max-width: 90vw; /* Limit to 90% of viewport width on large screens */
  width: fit-content; /* Let modal width match content width */
}

/* Ensure modal body doesn't clip content */
.modal-adaptive .modal-body {
  overflow: visible;
}

/* Seat row layout: wrap seats on small screens */
.seatRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px; /* Add space between seats */
}

/* Keep seat elements from shrinking */
.seatSold, .seatAvailable { /* Add any other seat classes you use */
  flex-shrink: 0;
  white-space: nowrap; /* Prevent seat numbers from wrapping */
}

4. Test Across Screen Sizes #

Now test on mobile, tablet, and desktop:

• On large screens, the modal will expand just enough to fit all seats without scrollbars
• On small screens, seats will wrap to new lines, and the modal will stay within 90% of the screen width (so it never gets too narrow)

This setup ensures your modals always fit their content perfectly, no scrollbars required!

内容的提问来源于stack exchange，提问作者Shojaeddin