Sorry for my English…I’m very new with javascript…
I’m with Linux Debian 64-bit
- Chrome version 81.0.4044.138 (Offizieller Build) (64-Bit)
- Firefox version 76.0.1 (64-Bit)
The problem appears only in Chrome, not in Firefox. Sometimes Chrome displays the <div> ajax-product-block with a different height between this div and his bottom.
With the problem
Without the problem
My code:
function layer_show_3(event)
{
event.preventDefault();
$('#layerPreview-3').attr("style", "top:0px; height:"+$(document).height()+"px; width:"+$(window).width()+"px; display:inline;");
var posTop=(($(window).height()/2)-(500/2))+$(document).scrollTop();
if(posTop<0)
posTop=0;
$('#layerPreviewContent-3').attr("style", "top:"+posTop+"px;");
/* Indicamos que se muestre la capa */
$('#layerPreviewContent-3').show(600);
}
function layer_close_3(event)
{
event.preventDefault();
$('#layerPreviewContent-3').hide(300);
$('#layerPreview-3').hide();
}
$('.btn-plus, .btn-minus').on('click', function(e) {
const isPlus = $(e.target).closest('.btn-plus').is('.btn-plus');
const input = $(e.target).closest('.input-group').find('input');
if (input.is('input')) {
input[0][isPlus ? 'stepUp' : 'stepDown']()
}
})
#lalo { width: 5%; margin-right: 10px; margin-right: 7px; }
#gallery_01 {
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
margin-top: 1%;
background-color: #a6a6a6;
}
#zoom_03 { width: 100%; }
.kleine-beschreibung {
background-color: #b3b3b3;
margin-top: 1%;
padding: 2%;
width: 40%;
float: right;
color: white;
text-shadow: 2px 2px 4px #000000;
box-shadow: 10px 10px 15px silver;
}
.stern { margin-top: 11%; }
.fenster-beschreibung { width: 52%; margin-top: 5%; }
.beschreibung-tittel { background-color: #e6e6e6; width: 25%; padding: 3%; border: 1px solid #b3b3b3; border-bottom: none; margin-bottom: 0.003%; font-weight: bold; box-shadow: 10px 10px 15px silver;
}
.beschreibung { background-color: #e6e6e6; width: 100%; padding: 2%; border: 1px solid #b3b3b3; box-shadow: 10px 10px 15px silver;}
#tittel-text {padding: 1.5%; width:100%;text-align:left;border-bottom:1px hidden; background-color: #d7a8a8;}
#closse-text { color: #f2f2f2; padding: 0.3%; cursor: pointer; float: right;}
.card {
float: right;
width: 45%;
background-color: #cccccc;
padding-right: 10%;
padding-bottom: 0.5%;
margin-left: 3%;
margin-top: 11%;
padding-top: 1%;
z-index: 1;
}
.card-title { width: 100%; font-weight: bold; text-align: right;}
.card-preis { font-size: 1.5rem; text-align: right;
}
.number-input {
display: flex;
align-items: center;
justify-content: space-between;
}
.label {
font-size: 1rem;
font-weight: bold;
margin-left: 9rem;
}
.input-group { width: 140px }
.form-control { text-align: left;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* custom primary buttons */
.btn-primary {
color: #212529;
background-color: #7cc;
border-color: #5bc2c2;
}
.btn-primary:hover {
color: #212529;
background-color: #52bebe;
border-color: #8ad3d3;
}
/* ***** calls jQuery code to open window **** */
#layerPreview-3 {position:absolute;z-index:1;display:none;top: 0px;left:0px;width:100%;height:100%;background-color:#fff;
background-color: rgba(50, 50, 50, 0.5);
}
#layerPreviewContent-3 { position:absolute;z-index:1;display:none;background-color:#dedee0; margin-top: 0px;left:50%; margin-bottom;
width: 46%;
margin-left:-350px;
height: 21rem;
-moz-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
-webkit-box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
box-shadow: 5px 5px 5px rgba(68, 68, 68, 0.6);
}
img { max-width: 100%;}
.text-pruduct { display: flex; flex-wrap: wrap; width: 100%; }
.bild-text { display: flex; width: 60%; }
.bild-text img { max-width: 200px; margin: 1px;}
.bild-text-anbieten { padding: 5%; margin-left: 1%;}
.verticalLine { border-left: 2px solid #cccccc;
height: 60%;
position: absolute;
left: 60%;
margin-left: -3px;
top: 18%;
}
.float_text { width: 40%; margin-top: 3%;}
.float_text p {margin-left: 13%; }
.bild-text .image-window { padding: 1%; margin: 1%; }
.ajax-product-block {
width: 100%;
display: flex;
justify-content: space-between;
padding: 10px 30px;
}
.ajax-product-block a { padding: 0.3125rem 1rem; text-decoration: none; }
.ajax-product-block a { -webkit-padding-start: 0.3125rem;}
.ajax-product-block { margin-top: 8%;}
.button_weiter_einkaufen {
display: inline;
text-transform: uppercase;
padding: 0.35em;
margin: 0;
font-size: 0.8em;
line-height: 1.35;
color: #333;
overflow: hidden;
border: 1px solid #b1b1b1;
background-color: #d8d8d8;
text-decoration: none;
float: left;
font-family: 'Open Sans', sans-serif;
position: relative;
color: black;
}
.button_weiter_einkaufen:hover {background-color: #666666; color: white;}
.button_zum_warenkorbs {
display: inline-block;
float: right;
font-weight: bold;
text-transform: uppercase;
background-color: #b3b3b3;
border: 1px solid #b3b3b3;
color: #fff;
padding: 0.35em;
font-size: 0.8em;
line-height: 1.35;
color: #333;
border: 1px solid #b1b1b1;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>
<div class="container">
<div class="stern">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
</div>
<div class="card">
<div class="card-body">
<p class="card-title">Rucksack aus Hanf Gelbe mit Zwei Riemen</p>
<p class="card-preis">Preis 40 €</p>
<div class="number-input ">
<div class="label">Stück: </div>
<div class="input-group quantity">
<div class="input-group-prepend">
<button class="btn btn-default btn-minus">
<i class="fa fa-minus"></i>
</button>
</div>
<input class="form-control quantity" min="0" name="quantity" value="1" type="number">
<div class="input-group-append">
<button class="btn btn-default btn-plus">
<i class="fa fa-plus"></i>
</button>
</div>
</div>
</div>
<button class="btn btn-primary btn-block mt-4" type="buttom" onclick='layer_show_3(event);' ><span>Zum warenkorb hinzufügen</span></button>
</div>
</div>
<!-- calls the open window -->
<div id="layerPreview-3" > </div>
<div id='layerPreviewContent-3'>
<!-- Mostramos el texto de cerrar para poder cerrar la ventana -->
<div id="tittel-text">Erfogreich zum Warenkorb hinzugefügt <span id="closse-text" onclick="layer_close_3(event);">Schließen</span></div>
<div class="text-pruduct">
<div class="bild-text">
<img class="image-window" alt="" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" />
<div class="bild-text-anbieten">
<p>Rucksack aus Hanf Gelbe</p>
<p>Stückzahl: <b>1</b></p>
<p>Bruttopreis: <b>40 € </b></p>
</div>
</div>
<div class="verticalLine"></div>
<div class="float_text">
<p>Anzahl der Artikel im Waremkorb: 1 </p>
<p>Wert des Warenkorbs: </p>
</div>
<div class="ajax-product-block">
<a class="button_weiter_einkaufen" href="lalo.php">weiter kaufen</a>
<a class="button_zum_warenkorbs" href="lalo.php">zum warenkorb</a>
</div>
</div>
</div>
<div class="fenster-beschreibung">
<p class="beschreibung-tittel"> Beschreibung</p>
<div class="beschreibung">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
</div>
Here also can show the code.
On Zum warenkorb hinzufügen to clicking and the window to open.
I don’t know because this problem comes sometimes, can please someone help me and to say with easy words because to comes this problem?