I need to make a pdf page where 90% of height will be container div with background with image inside which will fill whole 100% of the container. But it seems it is not possible in mpdf. CSS and html is simple.
<html>
<head>
<style>
#page {
margin-top: 14px !important;
margin-bottom: 14px !important;
margin-left: 20px !important;
margin-right: 20px !important;
}
body {
font-family: Sans-Serif !important;
box-sizing: border-box;
}
.section-header {
height: 25px !important;
line-height: 25px !important;
font-size: 20px;
margin: 0 0 7px 0 !important;
padding: 0 !important;
text-align: center;
}
.screenshot-container {
width: 100%;
height: 80%;
max-height: 80% !important; // This does not work
background-color: #f4f7fc;
text-align: center;
line-height: 100%;
border: 1px solid red;
}
.screenshot-container img {
height: auto;
max-height: 80%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="info-container">
<h1>{$campaign['name']}</h1>
<div><b>Odkaz na detail kampane</b><br>
<div><b>Naplánovanie kampane: </b>{$campaign['date_start']->format('d.m.Y')} - {$campaign['date_stop']->format('d.m.Y')}</div>
<div><b>Dĺžka kampane:</b> {$campaign['day_diff']} dní</div>
<div><b>Počet lokalít:</b> {$campaign['location_count']}</div>
<div><b>Počet obrazoviek:</b> {$campaign['device_count']}</div>
<div><b>Počet prehratí:</b> {$campaign['impressions']}</div>
<h2>Celková suma</h2>
<div><b>Celkom bez DPH:</b> {$budget}{$currency}</div>
<div><b>Zľava {$discount_sales_percent}%:</b> {$discount}{$currency}</div>
<div><b>Cena po zľave bez DPH:</b> {$discount_price}{$currency}</div>
</div>
</div>
<pagebreak />
<div class="section-header"> </div>
<div class="screenshot-container">
<img src="var:screenshot" />
</div>
<pagebreak />
...
Here is the screenshot where you can see red border around the container which should be 80% height.
What is wrong with that? It looks like container ignores its max-height.
Related
What happens is that I have a website on android that loads me correctly, on the desktop as well. But on iphone or mac os, I have problems and that is that it has many defects that is to say that it does not catch the styles.
I leave you part of the html and the css that I use in addition to the bootstrap 4 library.
They can also be viewed on my host to verify the problem of the iphone because at first glance on the desktop it looks normal, the problem is on an Apple device.
https://arstrikestudio.com/dlx/
HTML.
<div class="delexlp">
<span class="ir-arriba"> <i class="fa fa-arrow-circle-down"></i></span>
<div id="logo-div" class="paddingleft">
<div id="logo-img">
<img id="lgefect" src="delexni/img/default/delex2020-01.svg" width="100%" height="100%">
</div>
</div>
<div class="imgscroll">
</div>
<div class="col-lg-12 col-sm-12 oculto">
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="d-none d-md-block sectlp">
<img src="delexni/img/default/delex.svg" alt="">
<br>
<div class="container">
<p class="text-center">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;"> SIMPLE, CONFIABLE Y RAPIDO </span><br>ganandonos su confianza libra por libra.</p>
</div>
<br>
<div class="text-center">
<a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
<a class="btn btn-secondary" href="login">INICIA SESION</a>
</div>
</div>
<div class="sectlpm d-md-none">
<div class="row spaceblank2" style="padding-left:18%">
<img src="delexni/img/default/delex.svg" alt="" width="300px" height="200px">
</div>
<div class="row" style="padding-top:40vh">
<div class="container">
<p class="text-center spaceblank">Facilitamos a nuestros clientes el proceso<br>de comprar por internet brindandoles un servicio<br><span style="background-color:orange;color:white;"> SIMPLE, CONFIABLE Y RAPIDO </span><br>ganandonos su confianza libra por libra.</p>
</div>
</div>
<div class="row" style="padding-left:15%">
<div class="text-center">
<a class="btn btn-secondary" href="register">CREA TU CUENTA</a>
<a class="btn btn-secondary" href="login">INICIA SESION</a>
</div>
</div>
</div>
</div>
<div class="d-none d-md-block col-lg-6">
<img src="delexni/img/default/delex-x.svg" alt="">
</div>
</div>
</div>
</div>
CSS.
body{
background-size: cover;
background-repeat: no-repeat;
}
.delexlp{
background: url('../img/default/fondo2.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.delexlg{
background: url('../img/default/fondo.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100vh;
}
#logo-div {
position: fixed;
height: 14vh !important;
width: 100vw;
}
#logo-div img{
width: 100%;
height: 100%;
background-size: cover;
}
.black{
width: 100vw;
height: 45px;
background: black;
}
.oculto{
display: none;
}
.imgscroll{
height: 6000px;
}
.textground{
font-size: 720px;
}
.ir-arriba {
display:block;
text-align: center;
padding:20px;
font-size:48px;
color:#fff;
cursor:pointer;
position: fixed;
bottom:20px;
right:50%;
margin: auto;
z-index: 6;
}
.btn-delex{
background-color: #f6871f;
color: white;
}
.btn-delex2{
background-color: #f6871f;
color: white;
}
#keyframes crescendo {
0% {transform: scale(1);}
100% {transform: scale(43);}
}
.paddingleft{
padding-left: 0 !important;
}
.sectlp {
padding: 15%;
}
.pdtop15{
padding-top: 15%;
}
#media (max-width: 700px) {
.form-control{ background-color: red; }
}
h1, h2, h3, h4, h5 ,h6{
font-weight: 200;
}
a{
text-decoration: none;
}
p, li, a{
font-size: 14px;
}
fieldset{
margin: 0;
padding: 0;
border: none;
}
/* GRID */
.twelve { width: 100%; }
.eleven { width: 91.53%; }
.ten { width: 83.06%; }
.nine { width: 74.6%; }
.eight { width: 66.13%; }
.seven { width: 57.66%; }
.six { width: 49.2%; }
.five { width: 40.73%; }
.four { width: 32.26%; }
.three { width: 23.8%; }
.two { width: 15.33%; }
.one { width: 6.866%; }
/* COLUMNS */
.col {
display: block;
float:left;
margin: 0 0 0 1.6%;
}
.col:first-of-type {
margin-left: 0;
}
.row{
padding: 20px 0;
}
/* CLEARFIX */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
.wrapper{
width: 100%;
margin: 30px 0;
}
/* STEPS */
.steps{
list-style-type: none;
margin: 0;
padding: 0;
/*background-color: #fff;*/
text-align: center;
}
.steps li{
display: inline-block;
margin: 20px;
color: #ccc;
padding-bottom: 5px;
}
.steps li.is-active{
border-bottom: 1px solid #3498db;
color: #3498db;
}
/* FORM */
.form-wrapper .section{
padding: 0px 20px 30px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: #fff;
opacity: 0;
-webkit-transform: scale(1, 0);
-ms-transform: scale(1, 0);
-o-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-ms-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
text-align: center;
width: 100%;
}
.form-wrapper .section h3{
margin-bottom: 30px;
}
.form-wrapper .section.is-active{
opacity: 1;
-webkit-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.form-wrapper .button, .form-wrapper .submit{
background-color: #3498db;
display: inline-block;
padding: 8px 30px;
color: #fff;
cursor: pointer;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
position: absolute;
right: 20px;
bottom: 20px;
}
.form-wrapper .submit{
border: none;
outline: none;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-wrapper input[type="text"],
.form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
,.form-wrapper select,.form-wrapper textarea{
display: block;
padding: 10px;
margin: 10px auto;
background-color: #f1f1f1;
border: none;
width: 50%;
outline: none;
font-size: 14px !important;
font-family: 'Open Sans', sans-serif !important;
}
.form-wrapper input[type="radio"]{
display: none;
}
.form-wrapper input[type="radio"] + label{
display: block;
border: 1px solid #ccc;
width: 100%;
max-width: 100%;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
position: relative;
}
.form-wrapper input[type="radio"] + label:before{
content: "✔";
position: absolute;
right: -10px;
top: -10px;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 100%;
background-color: #3498db;
color: #fff;
display: none;
}
.form-wrapper input[type="radio"]:checked + label:before{
display: block;
}
.form-wrapper input[type="radio"] + label h4{
margin: 15px;
color: #ccc;
}
.form-wrapper input[type="radio"]:checked + label{
border: 1px solid #3498db;
}
.form-wrapper input[type="radio"]:checked + label h4{
color: #3498db;
}
.spaceblank{
background-color: white;
opacity: 0.89;
}
.spaceblank2{
background-color: white;
}
.pd30{
padding-top: 30%;
}
.pd60{
padding-top: 60%;
}
.pd200{
padding-top: 200%;
}
/* tabletas */
#media (min-width: 768px) {
}
/* escritorio normales */
#media (min-width: 992px) {
{ font-size:px; }
}
/* pantallas grandes */
#media (min-width: 1200px) {
}
/*****/
#media screen and (min-width: 700px) {
.form-control { font-size: px; }
.form-wrapper .section{
position: absolute;
min-height: 30px;
}
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
.form-control { font-size: px; }
}
#media only screen and (max-device-width: 480px) {
.form-control { font-size: 30px; }
.form-wrapper input[type="text"],
.form-wrapper input[type="password"],.form-wrapper input[type="email"],.form-wrapper input[type="number"]
,.form-wrapper select,.form-wrapper textarea{
width: 100%;
outline: none;
font-size: 32px !important;
}
.form-wrapper .button{font-size: 32px !important;}
.ocultar{
display: none !important;
}
.form-wrapper .section{
min-height: 30px;
max-height: 100px
}
}
Well, the mobile version in all devices had problems in zoom, and I will explain how I fixed it.
First, when you transform: scale(); an element, if the width/height of the zoom rate are the same, you can provide only 1 parameter instead of 2 (as in original code). Also, doing it using jQuery.scroll() is really slow on some devices.
But you were indeed spot on in your code when you created a scale in the style attribute of the element, instead of an animation. If you do an animation, it gets a blurred zoom effect on desktop, inclusive. Also, putting the pictures embedded on a svg indeed made better optimization than converting the images to png (really!).
Putting the animation on the style, only iOS makes some blurriness, which I failed to remove.
So the main point of the answer is the css rule transform-origin.
Since each mobile device has a different screen size, simply zooming on center of image (which is the default behavior without transform-origin), makes the image zoom on the wrong spot.
SO, I got a specific coordinate of a working device which transform-origin worked, and applied a calculation to get the corresponding coordinates on each device (for instance, calculated using the document.documentElement.clientHeight for height). And then setting these coordinates on transform-origin it worked.
Also second important point: for the animation to behave performant on mobile, I've used requestAnimationFrame.
There is an important detail: you were totally correct in making a svg with black background and transparent letters. I've fiddled A LOT and the final answer made use of that, but I've trimmed the logo as I asked you, and made black borders calculated in css using calc(), to fill entire screen on mobile.
And finally, I've removed all superfluous paddings and applied flexbox on elements to get control of centering things vertically/horizontally.
You can see all my edits on https://github.com/niloct/delex_refactor, and I've published it using the awesome https://fast.io free hosting service integrated with github (on https://delex.imfast.io/).
Let me know if you have more questions. Thanks for reading.
I have figured out a new problem in TCPDF (new for me), ie I can't place elements next to each other. I have tried so many solutions but they were zero in the end. Seems like TCPDF doesn't support the converting from all the css attributes. Hope you can help ;)
The code I had tried:
<style>
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader div{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
horiz-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
</style>
And the html:
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Thanks in advance for the answers!
Maybe this is your problem:
You are adding this:
.protHeader div{
width: 100%;
}
that means, that every <div> in your class .protHeader has 100% width.
EDIT: (i change the last part of the css and colored the inline-block divs red, for viewing that they should stay next each other)
Try to remove this line or change your styling to:
.protHeader{
position: relative;
border: 2px solid black;
display: table;
height: 250px !important;
}
.protHeader .fl_left{
width: 100%;
}
.protHeader div img{
position: relative;
display: inline-block;
float: left;
height: 100px;
overflow: hidden;
}
.protHeader div a{
position: relative;
display: inline-block;
text-align: right;
overflow: hidden;
float: right;
font-weight: bold;
font-size: 50px;
width: 40% !important;
}
.protHeader .fl_left div {
background-color: red;
display: inline-block;
}
<div class="protHeader">
<div class="fl_left">
<div style="border: 1px solid black;"><img src="$LogoN"></div>
<div style="border: 1px solid black;"><a>$protocol</a></div>
</div>
</div>
Okay, found a method, I had changed the whole framework to another (dompdf), which is easier to use and supports the newer CSS too.
i have this HTML line here (its an echo from php)
echo "
<div class='rowItem'>
<div class='singleItem'>
<div class='itemImage' >
<img src= $arr3[$i] >
</div>
<div class='itemName'>$arr1[$i]</div>
<div class='itemPrice'><br> Php$arr2[$i]
<div class='orderButtonDiv'>
<a href='menu_burger.php'>ORDER</a>
</div>
</div>
</div>
</div>";
Here is the CSS I'm using
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
here picture of the result
as you can see i am not able to resize the image here is the css code. Aside from that it is also overlapping some text
here is the image without the picture without the image
How can i resize the image properly that it will follow the the height of single item and at the same time equate its width to its height
Thank you very much
In my experience, a div with
background:url([imagepath]);background-size:cover;
is the best solution, the css property:
object-fit: cover;
Can help if you want to preseve the img aproach, but is less backwards compatible.
As for the overlaping text, read the documentation for z-index css property.
You will need to apply the background-image as an inline style. You can then add background-size: cover; onto .singleItem in css to control the background image size.
.itemImage{
height:100%;
width :100%;
}
.itemImage img{
width: 60%;
left: 0px;
right: 0px;
}
.itemName{
color: red;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 150%;
font-weight: bold;
margin-left: 40%;
margin-top: 4%;
}
.itemPrice{
color: black;
text-decoration: none;
font-family: "Roboto",sans-serif;
font-size: 110%;
margin-left: 41%;
position: absolute;
bottom: 25%;
z-index -1;
}
.singleItem{
width: 48%;
background-color: #e0dede;
background-size: cover;
border:1px solid red;
height: 150px;
position: relative;
z-index: -1;
}
echo "
<div class='rowItem'>
<div class='singleItem' style='background-image: url(\"{$arr3[$i]}\");'>
<div class='itemName'> {$arr1[$i]}
</div>
<div class='itemPrice'><br> Php{$arr2[$i]}
<div class='orderButtonDiv'><a href='menu_burger.php'>ORDER</a></div>
</div>
</div>
</div>";
I'm currently developing a wordpress theme with PHP, but my problem is with the css. I have tree divs, which i have inside a parent div. The parents div is by default 100%, so i want to specify the parent div (class: "single-general-sec1"). I've tried to calculate how wide the parent div should be in order for me to center it, but my calculations do not work. Please help.
Parent div should, by my calculation, be: 61% + 425px, but that dosen't work.
.single-general-sec1 {
margin-top: 150px;
margin-bottom: 150px;
height: auto;
width: calc(61% + 425px);
background-color: red;
}
.single-btype-div {
width: 250px;
display: inline-block;
float: left;
}
.single-gen-header {
font-size: 14px;
color: #D9D9D9;
font-family: "Roboto";
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
margin: 0;
width: auto;
}
.single-gen-desc {
color: #000;
font-family: "Roboto";
font-size: 28px;
font-weight: 300;
letter-spacing: 3px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-description-div {
width: 55%;
display: inline-block;
margin-left: 3%;
float: left;
}
.single-description-desc {
color: #000;
font-family: "Roboto";
font-size: 20px;
font-weight: 300;
letter-spacing: 1px;
margin: 0;
width: auto;
margin-top: 5px;
}
.single-live-button {
margin-top: 5px;
width: 175px;
height: 40px;
background-color: #8AA6B6;
border-radius: 8px;
border: none;
color: #fff;
font-size: 15px;
font-family: "Roboto";
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.single-live-div {
width: 100px;
display: inline-block;
margin-left: 3%;
}
<div class="single-general-sec1">
<div class="single-btype-div">
<p class="single-gen-header"> - Typ av projekt </p>
<p class="single-gen-desc">
<?php the_field('project-type'); ?> </p>
</div>
<div class="single-description-div">
<p class="single-gen-header"> - Beskrivning </p>
<p class="single-description-desc">
<?php the_field('description'); ?> </p>
</div>
<div class="single-live-div">
<p class="single-gen-header"> - Se live </p>
<a href="<?php the_field('page-url') ?>"><button class="single-live-button">
Besök sida > </button></a>
</div>
</div>
You cannot center a div using % values for width. Also the calculation is wrong: 250px + 175px + 100px = 525px so, the parent div should be 525px in order to fit nested divs. But you should normalize HTML first. Or just use bootstrap.css.
Another thing. For center a div you can use display:inline-block then on his parent use text-align:center.
Or when you have a fixed width, margin:50px auto;
I have used Safari to view my layout up until now. Everything appeared perfectly as I wanted it to in Safari, a simple layout with a logo, navigation bar, header image, and then a two column body area. However, in Firefox, both the header image and logo are not even displaying, and the two column float for the body area is not working and instead sinking into one... I am not sure what is going on, or what types of problems I will encounter in other browsers, but maybe someone can find what is wrong:
body {
background-color: some color;
background-attachment:fixed;
margin: 0;
padding: 0;
}
#wrapper {
width: 950px;
background-color: some color;
margin: 0 auto;
text-align: left;
border-right: 1px solid some color;
border-left: 1px solid some color;
}
#logo {
background-image: url('some url');
height: 100 px;
text-align: left;
border-style: none;
}
#navigation {
background-color: some color;
text-align: center;
border-top: 2px solid some color;
border-bottom: 2px solid some color;
height: 30 px;
}
#navigationElement {
display: inline-block;
padding-top: 2 px;
padding-left: 10 px;
padding-right: 10 px;
border-style: none;
}
#navigationElement a:link {
color: some color;
text-decoration: none;
}
#navigationElement a:hover {
color: some color;
font-weight: bold;
}
#headerImg {
background-image: url('some url');
height: 200 px;
text-align: left;
border-style: none;
}
#left {
background-color: some color;
width: 475 px;
float: left;
text-align: center;
border-style: none;
}
#leftElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#right {
background-color: some color;
width: 475 px;
float: right;
text-align: center;
border-style: none;
}
#rightElement {
background-color: some color;
padding: 40 px;
text-align: center;
border-style: none;
}
#footer {
background-color: some color;
height: 40 px;
text-align: left;
border-style: none;
clear: both;
}
Here is the html code:
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="navigation">
<div id="navigationElement">nav 1</div>
<div id="navigationElement">nav 2</div>
<div id="navigationElement">nav 3</div>
</div>
<div id="headerImg"></div>
<div id="bodyArea">
<div id="left">
<div id="leftElement">
left element text 1
</div>
<div id="leftElement">
left element text 2
</div>
</div>
<div id="right">
<div id="rightElement">
right element text 1
</div>
<div id="rightElement">
right element text 2
</div>
</div>
<div id="footer">some footer text</div>
</div>
</body>
It's probably because you are using spaces between values and px in height attributes (i.e height: 100 px; should be height: 100px;). Different browsers handle these kind of errors differently, so it's always a good idea to validate your css when you're having weird errors: http://jigsaw.w3.org/css-validator/
Remove the spaces between your pixel values.
height: 100 px; to height: 100px;