Solved

bootstrap modal acting strange shows in frame

Posted on 2016-08-01
7
115 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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

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 style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

688 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