Buttons are inputs fields are not getting displayed on modal inside .aspx page but labels are visible
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
Output (missing buttons and input fields):
It looks like your .modal-footer div is inside the .modal-body div. The bootstrap documentation has an example that shows the footer div outside of the body div
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I tried the same html for the modal popup that you reported and its working perfectly. I think you are missing css or other css are hiding your modal elements. have a look here:
function showModal()
{
$('#mdl_filter').modal('show');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<input type="button" id="btnShow" onclick="showModal();" value="Show Modal"/>
<div class="modal inmodal" id="mdl_filter" tabindex="-1" role="dialog" aria-hidden="true" style="position: absolute;">
<div class="modal-dialog modal-lg">
<div class="modal-content animated bounceInRight">
<div class="modal-header" style="height: 55px; padding-top: 10px">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Filter</h4>
</div>
<div class="modal-body">
<div class="tab-content">
<div class="space-10"></div>
<div id="filter_form" class="wizard-big filter_form">
<div class="step-content">
<div class="row">
<div class="col-lg-8">
<div class="form-group">
<label>By Number</label>
<input id="txt_filter_number" name="txt_filter_number" type="text" class="form-control" runat="server" />
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Apply</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Related
i am using bootsrap 5 modal.i try to use bootstrap grig system inside the modal,but when is use grid system there are margins between modal body and grids.how can i remove these margins?any help will be highly appreciated
Add class p-0 on your .modal-body that will set all this white padding to out.
and then add class mx-0 on the raw
.col-8{
background: red;
}
.col-4{
background: green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog rounded">
<div class="modal-content">
<!--<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>-->
<div class="modal-body p-0">
<div class="row mx-0">
<div class="col-8 px-0">...</div>
<div class="col-4 px-0">...</div>
</div>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>-->
</div>
</div>
</div>
I am creating a confirm dialog using Bootstrap 4 and the code goes like this
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer">
<div class="order-2"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="mr-auto order-1"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
The styling is working fine in chrome, firefox, edge but not working in IE
Chrome
IE11
Created a fiddle for the same.
Try the following HTML structure for "modal-footer"
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer justify-content-start">
<button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button>
<button class="ml-auto btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button>
</div>
</div>
</div>
</div>
display flex is not full support in IE.
i change footer display flex to block, then its work. check bellow code
<div class="modal fade show" id="completeAlertDialogue" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirm Navigation</h4>
</div>
<div class="modal-body">
<p>You haven't saved your changes. Are you sure you want to leave this page?</p>
</div>
<div class="modal-footer d-block">
<div class="row">
<div class="col-sm-6"><button class="btn btn-sm btn-primary" type="button" data-dismiss="modal">Yes</button></div>
<div class="col-sm-6 text-right"><button class="btn btn-sm btn-outline-secondary" type="button" data-dismiss="modal">No</button></div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
I am trying to create a pop up using bootstrap 4 on angular 4,
<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
{{modalTitle}}
</div>
</div>
<div class="modal-body">
Username : <input type="text" placeholder="username">
<br>
<br>
Password : <input type="password" placeholder="*****">
</div>
<div class="modal-footer">
<button type = "button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
The problem is everything works on the modal and I able to see also all the texts and password only the button is going outside the modal area that too only the text rest anything of the button is not visible, but when I do
<input type="button" value="click me"> It works
Here's the image
Could anyone help please ???
It seems that your button has float: right on it. Your style file could be overriding bootstrap style.
You were missing a closing div tag in your code. Also, I suspect that you might be using an outdated version of Bootstrap 4 files (most recent is beta 3).
The most recent Bootstrap 4 version uses popper.js instead of tether.js.
Here's what I see when using your code (after adding the missing closing tag):
That looks pretty much the way you want it to, right?
Here's the code I used (including the most recent Bootstrap 4 files):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div>
<span class="text-center" id="span1">{{title}}</span>
<button type="button" class="btn primary-btn" data-toggle="modal" data-target="#myModal">{{signUp}}</button>
</div>
<div id="myModal" class="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
{{modalTitle}}
</div>
</div>
<div class="modal-body">
Username : <input type="text" placeholder="username">
<br>
<br>
Password : <input type="password" placeholder="*****">
</div>
<div class="modal-footer">
<button type = "button" class="btn btn-primary">click me</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
How can I make this label align right? I can only align it left. I have to override the bootstrap 4 default value of justify-content: center to justify-content: right !important; But it aligns to the left. How can I align it to the right?
<div class="modal-body">
<form class="form-horizontal">
<div class="form-inline">
<label class="col-md-4">Type</label>
<input class="col-md-8" type="email" class="form-control">
</div>
</form>
</div>
CSS:
div.form-inline label.col-md-4 {
justify-content: right !important;
}
add class "text-right" to label
<div class="modal-body">
<form class="form-horizontal">
<div class="form-inline">
<label class="col-md-4 text-right">Type</label>
<input class="col-md-8" type="email" class="form-control">
</div>
</form>
</div>
You need to change it to:
div.form-inline label.col-md-4{
justify-content: flex-end;
}
justify-content: right is not a valid value.
Bootstrap 4 shifted to flex layout rather than block. You have to use justify-content: flex-end for your case.
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
div.form-inline label.col-md-4{
justify-content: flex-end;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-inline">
<label class="col-md-4">Type</label>
<input class="col-md-8" type="email" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
justify-content: flex-end didn't work for me (Bootstrap 4.1.0), but text-align: right works:
<style>
label { text-align: right }
</style>
or in a .css file:
.col-form-label { text-align: right }
I was answering another question today where the modal window had clickable buttons in FF and non-clickable buttons in Chrome.
Though I have figured out the issue that chrome was setting z-index of modal's parent to 0 and FF was setting it to auto.
In the demo below a modal window is placed inside of .fixed div. To fix the issue I had set z-index of .fixed div more than .modal-backdrop (let's say 1041).
Then I thought why can't I set the z-index of .fixed div myself as auto as FF sets it to auto, but it still didn't work in Chrome.
Can anyone explain what's happening here.
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
z-index sets the order of elements within a stacking context. position:fixed on the parent element of the modal contents places it in a different stacking context than the .modal-backdrop, used to hide the rest of the page.
The common solution for this is to place all the instances of modal contents from the page as direct children of the body element, after page loads, using this line:
$('.modal[role="dialog"]').appendTo('body');
$(function(){
$('.modal-body > span').html($('.fixed').css('z-index'));
});
$('.modal[role="dialog"]').appendTo('body');
.fixed{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="fixed">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>