Solved

bootstrap modal acting strange shows in frame

Posted on 2016-08-01
7
60 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
  • 4
  • 3
7 Comments
 
LVL 9

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 9

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 9

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 9

Expert Comment

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

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
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…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now