Solved

bootstrap modal acting strange shows in frame

Posted on 2016-08-01
7
104 Views
Last Modified: 2016-08-01
I have a bootstrap modal dialogue that is showing up on the left side of the screen in a frame.   If anyone has any ideas on what Im doing wrong please let me know.

Here is what it looks like.

Capture.JPG
I know its something wrong with my css because after a recent change this started happening.

Here is the html.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Submit your order</title>
</head>
<body>
    <div id="SubmitMain">
        <div class="PartialViewHeading">
            Submit
        </div>
        <div class="row">

            <div class="col-md-9">
                <p class="submit_text">
                    Submit to send your order form to Central Services.
                    You can review your order before you submit by navigating through the left menu tabs.
                </p>
            </div>

        </div>
        <div class="row">
            <div class="col-md-2">
                <button type="button" id="btn-prev-submit" class="btn">< Previous</button>
            </div>
            <div class="col-md-2">
                <button id="btn-Submit" type="button" class="btn">Submit</button>
            </div>
        </div>
        <div class="row">

            <div class="col-md-8">
                <p class="submit_text">
                    You will receive an email notification to confirm this form has been received by Central Services.
                </p>
            </div>
        </div>
    </div>
    <div id="ConfirmView">
            
                Thank you for using the Central Services Work Order Form!

    </div>    
    
    
  

</body>
</html>
<div id="modal_popup" class="modal fade" role="dialog">
    <div class="vertical-alignment-helper">

        <div class="modal-dialog modal-sm vertical-align-center">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Submit Order?</h4>
                </div>
                <div class="modal-body">
                    <p>You are about to Submit this order to Central Services.</p>
                </div>
                <div class="modal-footer" id="submit_buttons">
                    <table>
                        <tr>
                            <td><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button></td>
                            <td><button type="button" class="btn btn-primary" onclick="SaveApplication()">Submit Order</button></td>

                        </tr>
                    </table>


                </div>
            </div>


        </div>
    </div>
</div>

Open in new window


here is the css
body {
    padding-top: 50px;
    padding-bottom: 20px;
    /*font-size: 1.4em; bobs suggestion but it does nothing??*/
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}




/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select
     {
    max-width: 280px;
}


.shipinfo {
	width:130px;
}


/*breadcrumb nav*/

#breadcrumbs {
    overflow: hidden;
    width: 100%;
    list-style: none;
    padding: 0px;
}

    #breadcrumbs li {
        margin: 0 16px 0 0px;
        float: left;
    }

        #breadcrumbs li:last-child {
            margin: 0 0px 0 0px;
            float: left;
        }

        #breadcrumbs li span {
            background: #ccc;
            padding: .7em 1em;
            float: left;
            text-decoration: none;
            color: #222;
            text-shadow: 0 1px 0 rgba(255,255,255,.5);
            position: relative;
        }

        #breadcrumbs li:first-child span {
            width:160px;
	        text-align:center;
	        padding-left:8px;
        }


        #breadcrumbs li:nth-child(2) span {
           width:175px;
            /*text-align: center;*/
        }

        #breadcrumbs li:nth-child(3) span {
            width: 175px;
            /*text-align: center;*/
        }

        #breadcrumbs li:nth-child(4) span {
            width: 190px;
            text-align: center;
            padding-left: 23px;
        }
         #breadcrumbs li:nth-child(5) span {
            width: 170px;
            text-align:center;
	        padding-left: 0;
        }


    #breadcrumbs span::before {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -1.5em;
        border-width: 1.5em 0 1.5em 1em;
        border-style: solid;
        border-color: #ccc #ccc #ccc transparent;
        left: -1em;
    }


    #breadcrumbs span::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -1.5em;
        border-top: 1.5em solid transparent;
        border-bottom: 1.5em solid transparent;
        border-left: 1em solid #ccc;
        right: -1em;
    }


    #breadcrumbs .current {
        background: #0067b1;
        color: #fff;
    }

        #breadcrumbs .current:before {
            border-color: #0067b1 #0067b1 #0067b1 transparent;
        }

        #breadcrumbs .current:after {
            border-left: 1em solid #0067b1;
        }

    #breadcrumbs .step-complete {
        background: #eee;
    }

        #breadcrumbs .step-complete:before {
            border-color: #eee #eee #eee transparent;
        }

        #breadcrumbs .step-complete:after {
            border-top: 1.5em solid transparent;
            border-bottom: 1.5em solid transparent;
            border-left: 1em solid #eee;
        }


    #breadcrumbs li:last-child a::after {
        content: normal;
    }

    #breadcrumbs li:last-child span::after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -1.5em;
        border-top: 0;
        border-bottom: 0;
        border-left: 1em solid #ccc;
        right: -1em;
    }


    #breadcrumbs li:first-child a::before {
        content: normal;
    }

   
.pull-right {
    float: right;
}

.pull-left {
    float: left;
}


.buttons-container {
    /*position: relative;*/
    /*bottom: 20px;*/
    bottom: 10px;
    top:10px;
    padding-right: 15px;
    width: 992px;
    
} 


.btn {
    position: relative;
    display: block;
    padding: 10px 20px;
    margin: 25px 0 0;
    border: 0;
    background: #00447c;
    color: #fff;
    font-size: 13px;
    -webkit-transition: background-color 100ms ease-out 100ms;
    -moz-transition: background-color 100ms ease-out 100ms;
    -o-transition: background-color 100ms ease-out 100ms;
    transition: background-color 100ms ease-out 100ms;
    padding-left: 22px;
	padding-right:22px;
}

    .btn:hover,
    .btn:focus {
        background: #0067b1;
        color: #FFF;
        text-decoration: none;
    }

     /*buttons*/
    .btn-arrow {
    padding: 10px 15px 10px 20px;
    display: -webkit-box;
    /*float: right;*/
}

    .btn-arrowRemoveLink {
    padding: 10px 15px 10px 20px;
    display: -webkit-box;
    float: right;
    margin-right:30px;
}




.Application_Heading{
    font-family:Arial;
    font-size: 1.5em;
    font:bold;
    padding-bottom:25px;
    padding: 12px,0;
}
.PartialViewHeading{
    font-family:Arial;
    font-size:1.3em;
    padding-bottom:15px;
    padding-top:15px;
    color:#00447c;
    font-weight:800;
    
}
#statusBar{
    background-color:#00447c;
    margin-bottom:10px;
    height:40px;
    padding-left: 15px;
    padding-right: 15px;
    padding-top:11px;
    color:white;
}
#layout_container{
    background-color:#eee;
    border:1px solid;
    border-color:#ccc;
    width:980px;
    
}
#prod_container{
    margin-top:2px;
	margin-bottom:18px;

}
.agree_text{
    font-size:.8em;
    margin-bottom:10px;
}
.submit_text{
    margin-top:20px;
    font-size:.9em;
}
.confirm_text{
    margin-top:40px;
    font-size:1.2em;
    font-weight:bold;
}


#ajaxSpinnerContainer {

background-color:#eee;
opacity : 0.9;
background-repeat : no-repeat;
background-position : center;
left : 0;
bottom : 0;
right : 0;
top : 0;

}
#ajaxSpinnerImage {
    display:none;
    left : 50%;
top : 30%;
position : absolute;
z-index : 101;

}

.additional_toggle{
    visibility:hidden;
}


#financial_profile_select{
    margin-bottom:20px;
}

#shipping_profile_select{
    margin-bottom:20px;
}


.vertical-alignment-helper {
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}
.modal-content {
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width:inherit;
    height:inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}

.question_label{
    font-size:.8em;
    margin-top:15px;
   
}

#uploader{
    display:none;
}
.validation_msg{
    display:none;
    font-size:.8em;
    color:red;
}

#submit_buttons{
    text-align:center;
}
.modal{
    width:400px;
}
#prodDdl {
	padding: 3px;
	margin-top: -2px;
}
footer {
	margin-top: -28px;
	font-size:.8em;
}

.finance_table{
    padding:3px;
    width:100%;
}
.finance_table tr{
    /*background-color:#eee;*/
}
.finance_table td{
    margin:2px;
    padding:3px;
    font-size:.85em;
    width:25%;
}

.ship_table{
    padding:3px;
    width:100%;
}
.ship_table tr{
    /*background-color:#eee;*/
}
.ship_table td{
    margin:2px;
    padding:3px;
    font-size:.85em;
    width:25%;
}
#fileTable{
    margin:12px;
    border:1px solid #ccc;
}
#fileTable td{
    padding:10px;
   
}
#special-text{
    width:550px;
    font-size:.8em;
}

Open in new window



Here is the javascript
  $("#btn-Submit").click(function () {

        //save button
        $('#modal_popup').modal('show');

    });

Open in new window

0
Comment
Question by:hougie40
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 10

Accepted Solution

by:
Prasadh Baapaat earned 500 total points
ID: 41738020
Hi,
in your CSS given above ... change below code on line 354 to 356:

.modal{
    width:400px;
}

Open in new window

TO this code and make it to line s 354 to 357 (add the line with margin)
.modal{
    width:400px;
    margin: 0 auto;
}

Open in new window


your modal window should now open in center of the screen.... let me know

thanks,
Prasadh
0
 

Author Comment

by:hougie40
ID: 41738059
That was helpful.  It centered the modal.   So do I need another line for the css to get rid of the scroll bar?

Thanks!!

Capture.JPG
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41738064
well to be honest, I cannot help by using the code you pasted... I mean I had to make a page and add basic bootstrap & javascript to it to see on my browser...

so I can help you best if you can give a link to actual live page...  only then I can check where the frame is coming from....

in my local page there was no frame present when I made a test page using your code.

thanks,
Prasadh
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41738071
if you dont want to share the link in public... we can use teamveiwer and I take a look at you localhost page...
0
 

Author Comment

by:hougie40
ID: 41738087
This styling fixed it.  Thanks so much for your help!

.modal{
    width:400px;
    margin: 0 auto;
    overflow-y:hidden;

}

Open in new window

Capture2.JPG
0
 

Author Closing Comment

by:hougie40
ID: 41738089
Awesome job.
0
 
LVL 10

Expert Comment

by:Prasadh Baapaat
ID: 41738091
great :) I am happy for you.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question