Twitter Bootstrap Modal: Half off screen

Question

mmcdonald 28 Posting Pro

13 Years Ago

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

html-css:bootstrap web-design

5 Contributors
12 Replies
3K Views
2 Years Discussion Span
Latest Post 10 Years Ago Latest Post by YtuMamaTambien

Dani AI

Generated 11 Months Ago

Likely cause: you are mixing Bootstrap’s default modal markup with the jschr/bootstrap-modal extension and forcing state via inline styles. Your markup shows .modal-scrollable and a manual .modal-backdrop, plus class="in" and style="display:block; ...". With the jschr plugin, the ModalManager inserts the scrollable container/backdrop and toggles visibility for you. Hard-coding those pieces commonly leads to the “jumps to the top / half off-screen” symptom you see. Remove the wrapper and backdrop from your HTML, remove display:block and the in class from the modal, and let the plugin manage them. The plugin provides width via data-width and handles overflow/stacking; you should not pre-apply open-state styles. (github.com)

Actionable checklist:

Keep only the modal element in the DOM (no .modal-scrollable or manual backdrop). Let ModalManager create them.
Strip any inline display:block, margin-top, and the in class from the modal’s initial markup. This aligns with what observed about removing display:block. (github.com)
Ensure the modal sits near the end of <body> and is not inside a transformed ancestor. Any parent with transform, perspective, filter, or certain containment properties changes the containing block for position: fixed, which can shove a modal off-screen. (developer.mozilla.org)
Verify you are not including competing modal scripts or duplicate initializations.

If you need vertical centering for variable-height content, compute it on show (Bootstrap 2 event name is shown):

$('#supportModal').on('shown', function () {
  var $m = $(this);
  var top = Math.max(20, ($(window).height() - $m.outerHeight()) / 2);
  $m.css('top', top);
});

Lastly, changing left to 25% as tried may appear to help on one screen size, but it breaks true centering across widths; rely on left:50% with the plugin’s centering logic instead. (github.com)

All 12 Replies

Member #949455

13 Years Ago

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?

Member #949455

13 Years Ago

@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?

Member #949455

13 Years Ago

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.

Edited 13 Years Ago by Member #949455

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

mmcdonald 28 Posting Pro · Answer 1 · 2013-09-14T21:54:01+00:00

@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;
}

mmcdonald 28 Posting Pro · Answer 2 · 2013-09-14T22:21:36+00:00

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 28 Posting Pro · Answer 3 · 2013-09-14T22:22:51+00:00

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

mmcdonald 28 Posting Pro · Answer 4 · 2013-09-14T23:16:47+00:00

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 28 Posting Pro · Answer 5 · 2013-09-15T00:14:10+00:00

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

Member #949455 · Answer 6 · 2013-09-15T02:20:49+00:00

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 0 Newbie Poster · Answer 7 · 2015-06-04T06:56:18+00:00

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

Jad4 0 Newbie Poster · Answer 8 · 2015-08-03T09:42:13+00:00

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

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

YtuMamaTambien 0 Newbie Poster · Answer 9 · 2016-01-20T17:24:42+00:00

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%
  ...

Twitter Bootstrap Modal: Half off screen

Dani AI

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers