Twitter Bootstrap Modal: Half off screen

[mmcdonald]

Boo! Meh you knew it was me. After all, I post 99% of the dumass questions around here...

I have a modal that's being a teenager and isn't doing as it's being told: http://i.imgur.com/7PcLQCS.png

As you can see from the image, it's half off of the screen!

Here's the code:

//The button that kick starts the modal magic
<div class="left-trigger" >
    <button class="btn btn-blue" data-toggle="modal" data-target="#supportModal" type="button">Support</button>
</div>

//The modal itself (It's just a series of fields atm for testing :3 )
<div class="modal-scrollable hide" style="z-index: 10050;">

<div id="supportModal" class="modal hide fade modal-overflow in" tabindex="-1" data-width="760" style="display: block; width: 760px; margin-left: -380px; margin-top: 300px;" aria-hidden="false">

                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                                    <h3>Contact Support</h3>
                                </div>

                                <div class="modal-body">
                                    <div class="row-fluid">
                                        <div class="span6">
                                            <h4>Some Input</h4>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                        </div>
                                        <div class="span6">
                                            <h4>Some More Input</h4>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                            <p><input type="text" class="span12 m-wrap"></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn blue">Create My Ticket!</button>
                                </div>
                            </div></div>

                            //Add a transparent black bg behind the modal... keepin' it pretty!
                            <div class="modal-backdrop fade in hide" style="z-index: 10049;"></div>

All includes are present and correct as the Modal is fully functional.

Thanks for an help in advance,
Michael

All includes are present and correct as the Modal is fully functional.

@mcdonald

Where is your CSS style?

I assume you try on your div tag have this:

margin: 0px auto;

Your position is either static or relative:

position: static;

or

position: relative;

That will prevent it to cut off on a mobile device. Does that make sense?

[mmcdonald]

@LastMitch

I have tried all of the above, they result in the modal being pinned to the bottom of my screen rather than cut off of the top (Still no good as it's all retarded at the bottom too). Thanks for the suggestion though.

CSS for Modal:

.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.fade.in {
  top: 10%;
}

.modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
}

.modal-header .close {
  margin-top: 2px;
}

.modal-header h3 {
  margin: 0;
  line-height: 30px;
}

.modal-body {
  position: relative;
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}

.modal-form {
  margin-bottom: 0;
}

.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
     -moz-border-radius: 0 0 6px 6px;
          border-radius: 0 0 6px 6px;
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
     -moz-box-shadow: inset 0 1px 0 #ffffff;
          box-shadow: inset 0 1px 0 #ffffff;
}

.modal-footer:before,
.modal-footer:after {
  display: table;
  line-height: 0;
  content: "";
}

.modal-footer:after {
  clear: both;
}

.modal-footer .btn + .btn {
  margin-bottom: 0;
  margin-left: 5px;
}

.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}

.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

@mcdonald

Are you trying to do something like this or simliar to this:

http://davidwalsh.name/demo/css-fixed-position.php

If yes, then we are on the same page and can proceed moving forward.
If no, then you really need to explain what you are doing?

[mmcdonald]

No I'm not trying to do that :) I've explained it quite clearly... I even added a picture. You have my code, my CSS, a picture of my error and my explanation... would you like some blood too? :)

When I launch a modal it's appearing half cut at the top of the page so it can't be used (as shown in the picture [see OP]).

Cheers for your help though,
Michael

[mmcdonald]

A modal is a useful JS popup btw... if you don't know what they are here is a live example: http://getbootstrap.com/javascript/#modals

A modal is a useful JS popup btw... if you don't know what they are here is a live example: http://getbootstrap.com/javascript/#modals

@mcdonald

I know I seem those. A few Daniweb members has post that link.

The issue you are having is really related to CSS not javascript.

From this:

<div id="supportModal" class="modal hide fade modal-overflow in" tabindex="-1" data-width="760" style="display: block; width: 760px; margin-left: -380px; margin-top: 300px;" aria-hidden="false">

to this:

<div id="supportModal" class="modal hide fade modal-overflow in" tabindex="-1" data-width="760" style="display: block; width: 760px; margin: 0px auto; left:0px; top:0px;" aria-hidden="false">

It should be in the middle, if not then you can used left and top to center it. I'm on a desktop so I don't see the mobile version. So my spacing might be different from yours.

I assuming you are using this example:

Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.

The javascript should be the same if you are using that example.

[mmcdonald]

I'm not using the example, this is a reponsive modal included in a premium package. I read your suggestion and though I could see where you were coming from, I know it wouldn't work. In fact I was correct in imagining where the modla would end up. It was off the the top left of the screen with 75% of the modal off screen.

See current state: http://imgur.com/nz2AkMO

The reason I know this wouldn't work is partially because you removed: margin-left: -380px;. The modal has a width of 760px therefore minus 50% of it's width is required to place the modal into the center of the screen.

The other reason is that the modal first appears in the correct location when initiated and then suddenly jump to the top (happens in a microsend, literally), so it could still be JS.

The problem is hidden well and racking my brains.

Thanks
M

[mmcdonald]

I thought my code was fine, I thought I'd implement it on another page and it works great, must be a conflict so I'll look into it. Thanks

The reason I know this wouldn't work is partially because you removed: margin-left: -380px;. The modal has a width of 760px therefore minus 50% of it's width is required to place the modal into the center of the screen.

@mcdonald

I don't seen any Daniweb members used that much margin before. I had help and spoken to Daniweb members that used this bootstrap but I don't think I seen that before. It's really off. My screen is 24 inch monitor. So the code you provided is really off on my end.

[Tal_1]

I have the same problem. any luck finding the solution?

[Jad4]

You have to remove display: block; in <div id="supportModal"

This will solve your problem, because you already use margin-top: 300px;

[YtuMamaTambien]

Hello, I was having the same issue, I changed the left from 50% to 25% and it worked for me. Like this:

.modal {
  position: fixed;
  top: 10%;
  left: 50%;   <=== CHANGE TO 25%
  ...