0

I have several modals on a website that once I mess around with they load center page when in desktop view but after reopening the projects it will some times load only the left half on the page while the right half is cut off of the page as if it is set to to have the position: right attribute. I have not altered the bootstrap modal section of the css nor the js and am not using anything else besides bootstrap. I created a class to add to the modal to add every since center align attribute possible

.ALmodal{
 align-content:center;
 align-items: center;
 align-self: center;
}
    .iframe-container {    
    padding-bottom: 60%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.modal.in .modal-dialog {
  transform: none; /*translate(0px, 0px);*/
}
<div class="container">
  <!-- Trigger the modal with a button -->
<center>  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#schd">Open Large Modal</button></center>

  <!-- Modal -->
         <center><div class="modal fade ALmodal" id="schd" role="dialog">
    <div class="modal-dialog modal-lg">
      <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">
            <object width="100%" height="500" data="/img/Primal-Kickboxing-2014-Schedule.pdf" >
            </object>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
            </center>
    </div>

here is other modal related css that i have in a separate css file

AnthonyC
  • 11
  • 8

1 Answers1

0

I would refrain from putting extra classes that interfere with the standard BS classes, especially if they are about spacing like your ALmodal.

I have made a default BS Modal here, see the code. It works, also on mobile. The thing is, the Modal is centred by default by BS. So there is no need to make a class that tells it to centre again. That possibly messed it up. Go with the standard classes and take it from there.

http://www.bootply.com/9LUdALseVe

Also you want to look at the BS Helper Classes. There you see a section Center content blocks, have a look at that to see how you can centre content.

Please don't forget that a Modal on top of a Modal is not supported. See here.

If you must have two modal open at the same time look here. Though I really don't recommend that from a UI or UX point of view. Make your designs easy to understand and to follow. Try basic things and take it from there.

Hope this helps a bit. If I am wrong in any point please do let me know so I can avoid the same mistakes in the future. Thank you.

lowtechsun
  • 1,915
  • 5
  • 27
  • 55
  • I tried what you said showed on the link but still loading on the right. The main reason I made that class was because the modal was not centering by default. And no i only have one modal opening for each event. – AnthonyC Oct 11 '15 at 01:33
  • Ok it seems to work on dreamweavers preview but not on brackets liveview – AnthonyC Oct 11 '15 at 01:48
  • have you included normalize.css? have you left out your class? have your tried the default example like shown in the link? what happens when you try the default example? – lowtechsun Oct 12 '15 at 13:08