I have problem with materialize collapsible and date picker. Collapsible is not even opening on click and the date picker too. Date picker placed in Personal details - collapsible item. Someone please help me to fix collapsible and date picker.
Check: Placements App
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Placements MGIT</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<!-- If CDN not available, loading JQuery from Server-->
<script>
if (!window.jQuery) {
document.write('<script src="/js/jquery.min.js"><\/script>');
}
</script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="/js/materialize.min.js"></script>
</head>
<body>
<nav>
<div class="nav-wrapper">
MGIT Placements
<i class="material-icons">M</i>
<ul class="left hide-on-med-and-down">
<li class="active">Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Upcoming</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="student-profile">
<div class="col l8 offset-l2 m10 offset-m1">
<ul class="collapsible" popout" data-collapsible="accordion">
<li>
<div class="collapsible-header">Pefrsonal Info</div>
<div class="collapsible-body">
<div id="personal">
<div class="card black-text">
<div class="input-field col s12 m4 l4">
<input type="text" id="firstname" />
<label for="firstname">First Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="lastname" />
<label for="lastname">Last Name:</label>
</div>
<div class="input-field col s12 l4 m4">
<input type="text" id="surname" />
<label for="surname">Surname:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="text" id="father" />
<label for="father">Father Name:</label>
</div>
<div class="input-field col s12 l6 m6">
<input type="text" id="mother" />
<label for="mother">Mother Name:</label>
</div>
<div class="input-field col s12 m6 l6">
<input type="date" class="datepicker" />
</div>
</div>
</div>
</div>
</li>
<li>
<div class="collapsible-header">Academics Info</div>
<div class="collapsible-body"> Acaademics Should be here</div>
</li>
<li>
<div class="collapsible-header">Change Password</div>
<div class="collapsible-body">Password Change Shoule be here</div>
</li>
<li>
<div class="collapsible-header">View Data </div>
<div class="collapsible-body" id="dynamicdata">View Data</div>
</li>
</ul>
</div>
</div>
</div>
<style type="text/css">
<style type="text/css">
body {
background-color: #FCFCFC;
}
nav{
background-color: #33597C;
}
.updates{
position: absolute;
padding: 20px;
background: transparent;
}
marquee{
padding: 20px;
}
.vline{
width: 1px;
position: absolute;
background-color: orange;
}
.vline.medium{
top: initial;
height: 420px;
}
.small-login{
padding: 20px;
}
.login-fields{
padding: 20px;
}
h6{
color: #33597C;
}
h2 {
color: grey;
}
/* #4A6787 ; #33597C; */
.login-bg {
margin-top: 5%;
}
#message {
color: red;
margin: 20px;
}
#lgn_btn{
top: 20px;
background-color: #33597C;
width: 60%;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
/* label focus color */
.input-field input[type=password]:focus + label {
color: #1A237E;
}
/* label underline focus color */
.input-field input[type=password]:focus {
border-bottom: 1px solid #1A237E;
box-shadow: 0 1px 0 0 #1A237E;
}
</style>
<script type="text/javascript">
jresp = '{% autoescape off%}{{jresp}}{% endautoescape%}';
resp = JSON.parse(jresp);
rollno = resp['rollno'];
details = resp['data'];
var update = document.getElementById('dynamicdata')
for (keys in details) {
update.innerHTML += "<b>"+keys[0].toUpperCase()+keys.slice(1).toLocaleLowerCase()+": </b>"+details[keys]+"<br />"
}
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 15,
});
$(".button-collapse").sideNav();
$(document).ready(function () {
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
});
</script>
</body>
</html>
Well, after reading code, debugging and Googling I am able to fix the problem.
First thing - Materialize Collapsible.
Clicking on collapsible header, display property of collapsible body
is not changing.
So, adding display property for the element collapsible body, will fix the problem.
collapsible-body{
display: block;
}
`
Second thing - Materialize DatePicker
On Chrome, it is not responding to mouse clicks. But, responding to space button.
So, to fix this issue, I just added a bit of JQuery code as shown below.
Date Picker HTML Code
<div class="input-field col s12 m6 l6">
<label for="dob">Date of Birth:</label>
<input id="dob" type="text" class="datepicker" />
</div>
and mouse click event that triggers...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990,0,1),
max: new Date(2000,11,31),
closeOnSelect: true,
});
$("#dob").click(function (event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
Here, you can see the working materialize date picker...
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 40,
min: new Date(1990, 0, 1),
max: new Date(2000, 11, 31),
closeOnSelect: true,
});
$("#dob").click(function(event) {
event.stopPropagation();
$(".datepicker").first().pickadate("picker").open();
});
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</head>
<body>
<div class="input-field">
<label for="dob">Date of Birth:</label>
<input id="dob" type="date" class="datepicker" />
</div>
</body>
Related
I built out a review slider to display various reviews from customers across all of our marketplaces, it works great on codepen, but not so much on the website. Im sure im missing something simple, but can't figure it out.
Platform: Magento 2.3.5 P2
How the slider appears on the website
https://codepen.io/hqqh/pen/VwpzGYV
.slider {
background: linear-gradient(90deg, rgba(235, 235, 235, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(235, 235, 235, 1) 100%);
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
height: 250px;
margin: auto;
overflow: hidden;
position: relative;
width: 1280px;
padding-top: 30px;
padding-bottom: 10px;
border-radius: 5px;
}
.slider::before,
.slider::after {
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%);
content: "";
height: 290px;
position: absolute;
width: 200px;
z-index: 2;
}
.slider::before {
left: 0;
top: 0;
}
.slider::after {
right: 0;
top: 0;
transform: rotateZ(180deg);
}
#keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7))
}
}
.slide-track {
animation: scroll 60s linear infinite;
display: flex;
width: calc(250px * 14);
}
.slide {
height: 214px;
width: 350px;
}
.review-card {
background: white;
margin: 10px;
height: 195px;
padding: 7px;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
border-radius: 10px;
}
.review-card-header {
height: 80px;
}
.review-card p {
font-family: 'Roboto Condensed', sans-serif;
}
.ebay-logo,
.az-logo {
position: relative;
top: -40px;
left: -40px;
width: 150px;
height: 150px;
}
.review-content {
padding: 5px;
height: 60px;
position: relative;
z-index: 2;
margin-bottom: 0px;
bottom: 18px;
}
.review-content::before,
.review-content::after {
font-family: FontAwesome;
padding: 5px;
color: #d3d3d3;
margin: 5px;
}
.review-content::before {
content: "\f10d";
}
.review-content::after {
content: "\f10e";
}
<link rel="stylesheet" type="text/css" media="all"
href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400" />
<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div class="col-lg-12">
<div class="container">
<div class="row justify-content-center">
<h2 style="text-align: center; font-size: 42px; text-transform: uppercase; font-family: oswald;">Over
1,000,000 Happy Customers Served</h2>
<h4 style="text-align: center; font-family: Roboto;">These are just a handful of the reviews we have
received recently across all of our marketplaces </h4>
<div class="slider">
<div class="slide-track">
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="ebay-logo"
src="https://integrationmaverick.net/offsite-images/eb-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-eBay Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/az-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Couldn’t be happier with the new front bumper cover!!! MBI auto got the paint matched perfectly, and the fit was FANTASTIC! We are thrilled! Last picture is the original bumper cover after my wreck</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Amazon Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/google-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">I received the bumper I ordered sooner than expected and was pleasantly surprised. It fit just right and paint matched perfectly. I would definitely recommend trying them out for a replacement bumper.</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Google Review 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/eb-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-eBay Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
<div class="slide ">
<div class="review-card">
<div class="col-lg-3 review-card-header">
<div class="container">
<div class="row">
<img class="az-logo"
src="https://integrationmaverick.net/offsite-images/az-logo.png" border="0">
</div>
</div>
</div>
<div class="col-lg-3 review-card-body">
<div class="container">
<div class="row">
<p class="review-content">Arrived quicker than expected, was very very well
packaged, paint was excellent. Would highly recommend. Thank You</p>
</div>
<div class="row">
<p style="float: right; margin-top: 0px; color: #c3c3c3">-Amazon Customer 2021</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="container">
<div class="row" style="text-align:center;">
<p>Click Here To View More Customer Reviews</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks
Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /*Full height*/
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/
<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
I'm a little bit late on this post - welcome to SO, Sabs! Kudos for making a first post with a clear and concise problem, and including your relevant code.
At first glance, the reason you're always returning "Text 1" is because your JS file hardcodes modal01 as the ID for each modal. So while the function is called whenever you click any of the images, it will always show that ID.
You don't have to re-invent the JS and CSS for a modal popup, though - a much simpler way is to use Bootstrap. You can still edit CSS and JS to your heart's content by giving IDs and classes, but you don't need much to call it. You need to include source CSS/JS files (from CDN here for simplicity's sake):
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Calling the modal from your HTML uses a data-toggle and a data-target:
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" data-toggle="modal" data-target="#myModal1"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" data-toggle="modal" data-target="#myModal2"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" data-toggle="modal" data-target="#myModal3"></div>
</div>
The modals:
<!-- Beginning Modal 1 -->
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 1</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The first modal..</p>
<img src="img/brands/AyalaBar.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 1 -->
<!-- Beginning Modal 2 -->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 2</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>A second modal..</p>
<img src="img/brands/BastianInverun.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 2 -->
<!-- Beginning Modal 3 -->
<div class="modal fade" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading 3</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>The third modal..</p>
<img src="img/brands/breuning.png">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- End Modal 3 -->
I am using Kendo MVVM. This ApisTemplate is called Remotely and It opens up. Problem is in "PaxPreferenceTemplate" template. There are 2 source binding. Only 1st works i.e Segment . i dont know why . Even if you use
<label data-bind:"text: Segment.SegmentDetailsToDisplayPricing" ></label>
still result would be same. if i comment
<div data-bind="source: Segment"></div>
then 2nd line works
Please tell what would be correct way
Note: ALL below code is in 1 file.
<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div>
<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>
<div style="text-align:center;">
<button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">
<i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save
</button>
<button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>
</div>
</div>
</script>
<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div data-bind="source: Segment" data-template="SegmentTemplate"></div>
<div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>
</script>
<script id="SegmentTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<label data-bind="text: SegmentDetailsToDisplayPricing"></label>
</script>
<script id="PaxInfoTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div>
<label data-bind="text: Pax.PersonName"></label>
<input data-role="dropdownlist"
data-text-field="PassportNumber"
data-value-field="PassportNumberID"
data-bind="source: PossiblePassports" />
<input data-role="dropdownlist"
data-text-field="FrequentFlyernumber"
data-value-field="FrequentFlyernumberID"
data-bind="source: PossibleFrequentFlyers" />
</div>
</script>
I think you must to divide your template because you have two different type a list and a single item.
<script id="ApisTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div>
<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate"></div>
<div data-bind="source: ApisVMList.PaxPreferenceBySegment" data-template="PaxPreferenceTemplate_Second"></div>
<div style="text-align:center;">
<button type="button" id="btnIssueTicket" onclick="SaveIssueTicket(this)" class="k-button k-primary Apis_submit " style="width: 100px; height: 25px; margin-right: 5px;">
<i class="fa fa-floppy-o fa-inverse" aria-hidden="true"></i> Save
</button>
<button type="button" class="k-button " onclick="CloseApisWindow(this)" style="width: 100px; height: 25px;"><i class="fa fa-ban"></i> Cancel</button>
</div>
</div>
</script>
<script id="PaxPreferenceTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
<div data-bind="source: Segment" data-template="SegmentTemplate"></div>
</script>
<script id="PaxPreferenceTemplate_Second" type="text/x-kendo-template" class="KendoExtTemplate">
<div data-bind="source: PaxInfo" data-template="PaxInfoTemplate"></div>
</script>
Vertically center modal dialogues in Bootstrap 4.
Note: The requirements below have been added to make it clear I am looking for a proper way to vertically center a Bootstrap modal, covering all possible cases, on all possible devices, in all browsers. In my case, I wanted it for a large SPA reusing the same modal throughout the app so I needed it to work in each case.
It should:
keep modal contents accessible, on all devices, even when taller than device height
work on any device+browser combination with a market share larger than 1%
not use display:table-cell or similar hacks (any layout-ing technique not meant or designed for layout-ing)
close on click or tap anywhere outside of .modal-content (including above and below).
limit usage of jQuery/JavaScript as much as possible
(optional) work on default Bootstrap examples without need of markup modifications
Update, as of Beta 3, [docs]:
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Original answer:
SCSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
#media(max-width: 768px) {
min-height: calc(100vh - 20px);
}
}
or unprefixed CSS:
.modal-dialog {
min-height: calc(100vh - 60px);
display: flex;
flex-direction: column;
justify-content: center;
overflow: auto;
}
#media(max-width: 768px) {
.modal-dialog {
min-height: calc(100vh - 20px);
}
}
Note 1: Please note fully prefixed CSS gradually becomes obsolete as browser support for certain properties changes. The right way of getting the updated prefixed CSS is to:
copy/paste the unprefixed CSS into Autoprefixer.
set the filter in the bottom box to the desired setting (for max. browser support use > 0%).
get the latest code from the box on the right.
Note 2: This answer was added in early stages of v4 (alpha 3 or 4), which is now currently in beta. You can safely replace the CSS part of this answer by adding the following classes to .modal-dialog:
h-100 d-flex flex-column justify-content-center my-0
..., as pointed out by #Androbaut in the comment below. You will still need the JavaScript (see below) to close the modal window on click tap below/above the modal window.
jQuery (needed to close modal on click/tap above/below):
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
That's it.
Working snippet, fully-prefixed CSS and markup using different modal sizes:
$('.modal-dialog').on('click tap', function(e){
if ($(e.target).hasClass('modal-dialog')) {
$('.modal').modal('hide');
}
})
.modal-dialog {
min-height: -webkit-calc(100vh - 60px);
min-height: -moz-calc(100vh - 60px);
min-height: calc(100vh - 60px);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
overflow: auto;
}
#media (max-width: 768px) {
.modal-dialog {
min-height: -webkit-calc(100vh - 20px);
min-height: -moz-calc(100vh - 20px);
min-height: calc(100vh - 20px);
}
}
/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */
.modal-content {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column; }
.modal-content > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-moz-box-flex: 0;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.modal-content > *.modal-body {
-webkit-box-flex: 1;
-webkit-flex-grow: 1;
-moz-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#Modal_2 .modal-content {
min-height: 50vh;
}
#Modal_3 .modal-content {
min-height: 85vh;
}
#Modal_4 .modal-content {
min-height: 200vh;
}
.full-page-center {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 100vh;
}
.full-page-center button {
margin: 15px;
}
#media (max-width: 768px) {
.full-page-center {
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.full-page-center button {
display: block;
min-width: 100%;
margin: 10px 15px;
}
.full-page-center::after {
display: none;
-webkit-box-flex: 0;
-webkit-flex-grow: 0;
-moz-box-flex: 0;
-ms-flex-positive: 0;
flex-grow: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether#1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<div class="container full-page-center">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
Tiny modal
</button>
<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
Normal modal
</button>
<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
Large modal
</button>
<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
Very large modal
</button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
<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="modalLabel_1">Tiny modal</h4>
</div>
<div class="modal-body">
I am cute...
</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>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
<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="modalLabel_2">Dull modal</h4>
</div>
<div class="modal-body">
I am normal...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
<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="modalLabel_3">Don't call me fat</h4>
</div>
<div class="modal-body">
Call me "oversized".
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">Some action</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" aria-hidden="true">
<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="modalLabel_4">Huge modal</h4>
</div>
<div class="modal-body">
Comments, anyone?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning">Some action</button>
</div>
</div>
</div>
</div>
If you find any bugs or shortcomings please let me know. I will take the time to improve the answer and keep it useful. Help with this task is welcome.
Simply add modal-dialog-centered class along with model-dialog as below
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<button class="btn btn-success" data-toggle="modal" data-target="#MyModal">Launch Modal</button>
<div class="modal align-middle" id="MyModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">Lorem Ipsum is simply dummy text of the printing and typesetting industry</div>
<div class="modal-footer">
<button class="btn btn-info" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here's a simple Flexbox Approach.
SCSS
.modal-open .modal {
display: flex!important;
align-items: center!important;
.modal-dialog {
flex-grow: 1;
}
}
Working Demo
Just use this class " modal-dialog-centered "
for showing Modal on center of screen Vertically .
for exmaple:
<div class="modal-dialog modal-dialog-centered" role="document">
Thanks
This solution works for small and long modals thats needs scroll.
Add these custom css rules:
.modal-header {
flex-shrink: 0;
}
.modal-body {
overflow-y: auto;
}
And add these classes:
To modal-dialog: h-100 my-0 mx-auto d-flex flex-column justify-content-center
To modal-content: m-2
Like this:
<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
<div class="modal-content m-2">
...
</div>
</div>
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">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">
...
</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>
By adding following css to '.modal-dialog' class, it works fine for me. You can override with custom css class also.
.modal-dialog {
height: 100vh;
display: flex;
align-items: center;
}
Another simple way to make your modal vertical align is to adjust top: 50%;, transform: translateY(-50%); and margin: 0 auto to the modal dialog class.
Edit:
The downside is that you also have to set max-height: 100vh; to .modal-content. Otherwise the top of modal is not accessible anymore when your modal is getting heigher than the viewport.
Demo:
.modal.vertically-modal .modal-dialog {
transform: translateY(-25%);
top: 50%;
margin: 0 auto;
}
.modal.vertically-modal.show .modal-dialog {
transform: translateY(-50%);
}
.modal-content {
max-height: 100vh;
overflow-y: auto;
padding: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js "></script>
<button class="btn btn-primary" data-toggle="modal" data-target=".vertically-modal">Show modal</button>
<div class="modal fade vertically-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
Vertically modal
</div>
</div>
</div>
There is a much easier way of achieving this without having to write a bunch of CSS overrides or other custom CSS, basically using just the stock bootstrap classes and adding one extra HTML element to control the height.
CSS (Not Needed see below)
.modal > .row{
flex: 1;
}
HTML (Updated see below)
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" 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>
</div>
Then to use:
JS
$("#dialogBox").modal('show');
OR HTML
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
Launch demo modal
</button>
There is probably a way to achieve the desired result using only the bootstrap .row, .col and flex-XXX classes but I was unable to get that to work.
One last note, you might have to add: <body class="d-flex"> to get everything to work depending on the rest of your CSS.
UPDATE
There is a way to achieve this using only bootstrap classes, h-100 and w-100:
<div id="dialogBox" class="modal fade d-flex">
<div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
<div class="modal-dialog align-self-center" 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>
</div>
Try this,
::ng-deep{
.modal-body{
padding: 0.25rem;
width: 600px !important;
}
.modal-content {
position: relative;
display: flex;
flex-direction: row;
margin-top: auto;
margin-bottom: auto;
width: 600px !important;
}
}
i want to display carousel as half image slider instead of full page slider.
CSS:
html,
body {
height: 40%;
margin: auto;
}
header.carousel {
height: 40%;
margin:auto;
}
header.carousel .item,
header.carousel .item.active,
header.carousel .carousel-inner {
height: 40%;
margin:auto;
}
header.carousel .fill {
width: 100%;
height: 40%;
background-size:cover ;
margin: auto;
}
HTML:
<!-- Wrapper for slides -->
<div class="carousel-inner">
<!--first slide-->
<div class="item active">
<img src="image/stylegirl.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Text Test</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
<!--second slide-->
<div class="item">
<img src="image/couple.jpg" style="width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button">Test Button</a></p>
</div>
</div>
</div>
<!--Third Slide-->
<div class="item">
<img src="image/w1.jpg" style="Width:100%">
<div class="carousel-caption">
<h1 class="toggleCaption">Test Text</h1>
<div class="toggleButton">
<p><a class="btn btn-default-outline btn-lg" role="button"> Test Button</a></p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
jsfiddle
Image is missing from the fiddle coz i don't know how to add image from the local file.
It shows half slider image only when i use height in px instead of %.
But still it is showing as full page slider carousel. Why is that.
Any help.