0

https://codepen.io/Maximusssssu/pen/mdPoKZe

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>

<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
  <div class="modal-dialog" style="width: 150%;">

    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>

    </div>
  </div>

  <!-- Modal with tab -->
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Above code works fine. However, when the window is minimized, the width changes (not 100% anymore). How do i fix the problem? Thank you for your attention.

Ezra Siton
  • 6,887
  • 2
  • 25
  • 37
Maximus Su
  • 35
  • 5
  • Remove the inline style `style="width: 150%;"` (The modal overflow the screen). Maybe related: https://stackoverflow.com/questions/34014891/how-to-increase-bootstrap-modal-width. If these details not helpful please add a screenshot of the desired outcome. – Ezra Siton Sep 26 '20 at 15:54

3 Answers3

0

remove the style="width: 150%;"

Adam
  • 3,415
  • 4
  • 30
  • 49
  • This is not an answer, what you put is comment, please try to add a little description to your answer. – Maher Sep 26 '20 at 16:19
0

try max-width: 150%; instead of width: 150%; that is

<div class="modal-dialog" style="max-width: 150%;">
    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>
    </div>
</div>

Working demo 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#modal-with-tab">Modal with tabs</button>

<!-- Modal with tab -->
<div id="modal-with-tab" class="modal modal-with-tab fade" role="dialog">
  <div class="modal-dialog" style="max-width: 150%;">

    <div class="modal-content">
      <div class="modal-body">
        Minimise this window to see the defect. After minimise, the width is not 100%
      </div>

    </div>
  </div>

  <!-- Modal with tab -->
  
  
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
0

I edit this answer ok?

the solution is to add a class with the following code and remove the inline-style

.myModal {
   margin-left: 0
 }

I just tried it and it works

the problem is that bootstrap adds a margin for those sizes, just set it to 0

hck3791
  • 1
  • 1