2

I am trying to position the modal in the center of the screen always.
To do so , I added the following CSS class to the modal : 

.modal-position {
           position: fixed;
           left: 50% !important;
           top: 50% !important;
           transform: translate(-50%, -50%);
 }

But its not getting exactly centered and on small screen size a vertical scroll bar appears beside it though there is enough space for the modal.

JS fiddle for the same : https://jsfiddle.net/86n9pbat/

Shruti Agarwal
  • 887
  • 2
  • 14
  • 29
  • problem with css you apply on bootstrap pop-up model.Please follow this link `https://codepen.io/dimbslmh/full/mKfCc` – Manjeet Thakur Jun 20 '17 at 06:16
  • This is actually a common problem for bootstrap. Please see [this](https://stackoverflow.com/questions/18422223/bootstrap-3-modal-vertical-position-center) duplicate question. The most accepted answer is outlined in the codepen provided by @ManjeetThakur (https://codepen.io/dimbslmh/full/mKfCc) – Dana Jun 20 '17 at 06:23

3 Answers3

1

Have you tried adding overflow: hidden in your css body/modal when modal is open?

perseusl
  • 348
  • 1
  • 14
  • 1
    This will only work with !important since modal by default has overflow-y set to auto – Dana Jun 20 '17 at 06:22
  • not really, all you need to do is make sure that you have higher points/priority in your selector, like try using id instead of class @Dana – perseusl Jun 20 '17 at 06:24
  • @ShrutiAgarwal what do you mean clip extra data? having it visible will make excess characters or dom elements still be visible on your dontainer – perseusl Jun 20 '17 at 09:08
  • @perseusl : Thankyou :) – Shruti Agarwal Jun 20 '17 at 10:13
  • overriding the overflow property to VISIBLE helped me remove the extra scroll bar and hence accpeting this as answer. If you dont want to show the data you can make it overflow : hidden – Shruti Agarwal Jun 20 '17 at 10:42
  • @Dana : Perseusl is correct. Setting it to important is not required. Just a hig priority selector is enough – Shruti Agarwal Jun 20 '17 at 10:43
1

Try this code

HTML

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog myModal">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

CSS

.myModal
{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
  display:table;
  max-width:50%;
}
.myModal .modal-content
{
  display:table-cell;
}

pretty much the same code. I have added a myModal class to modal-dialog and the CSS.. link for reference hope this helps..

Chandra Shekhar
  • 3,550
  • 2
  • 14
  • 22
-1

No need for the above code. Bootstrap modal is responsive by default. If you want to adjust the width just change it on modal-content class in your css file.

Sangeetha DH
  • 23
  • 5