Solved

bootstrap modal acting strange shows in frame

Posted on 2016-08-01
7
93 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
Independent Software Vendors: 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

756 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