I want to refresh div content when looping is complete (scroll down and up). Right now im able to looping and refresh page, but the the effect is not smooth. The looping will stop and reset from the begining.
So, can i refresh my page (or if possible only refresh '') everytime 1 full cycle looping is complete?
here's my blade file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/r/bs-3.3.5/jq-2.1.4,dt-1.10.8/datatables.min.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
</head>
<style>
.alert-message {
color: red;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.columnl {
float: left;
width: 70%;
padding: 5px;
}
.columnr {
float: left;
width: 30%;
padding: 5px;
}
.row::after {
content: "";
clear: both;
display: table;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
border: 1px solid #ddd;
}
th,
td {
text-align: left;
padding: 16px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
#header {
width: 100%;
height: 139px;
overflow: hidden;
}
#right_side {
height: auto;
background-repeat: repeat-y;
overflow: hidden;
position: absolute;
font-size: 16px;
}
#content {
height: 460px;
overflow: auto;
}
.inner {
position: relative;
top: 0px;
}
.outer {
overflow: hidden;
}
</style>
<body>
<div class="container">
<div id="header">
<h2 style="margin-top: 12px; text-align: center" class="alert alert-info">LANTAI</h2>
</div>
<div class="row" style="clear: both;margin-top: 18px;">
<div class="row">
<div class="columnl">
<div class="outer">
<div class="inner">
#foreach($poli_doctors as $poli_doctor)
<br>
<h4 class="card-header" style="font-weight:bold; text-align:center;color: blue">
{{$poli_doctor->nmdokter}} {{$poli_doctor->kddokter}}</h4>
<table id="tbl_antrian" class="table table-striped table-bordered">
<thead>
<tr>
<th style="font-weight:bold; font-size: 20px; text-align:center">ID Number
</th>
</tr>
</thead>
<tbody>
#foreach($vw_antrians as $vw_antrian)
#if($vw_antrian['kddokter']==$poli_doctor->kddokter)
<tr id="row_{{$vw_antrian['noantri']}}">
<td style="font-weight:bold; font-size: 20px; width:15%; text-align:center">
{{ $vw_antrian['noantri2'] }}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
#endforeach
</div>
</div>
</div>
<div class="columnr">
<div id="right_side">
<table>
<tr>
<th>Last Scan</th>
</tr>
<tr>
<td>{{$get_lastvalid->noantri2}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="{{asset('js/jquery-3.6.0.min.js')}}"></script>
<script>
$(document).ready(function(){
setTimeout(function() {
location.reload();
}, 5000);
$('#tbl_antrian').DataTable();
});
function autoScrollDown(){
$(".inner").css({top:-$(".outer").outerHeight()}) // jump back
.animate({top:0},5000,"linear", autoScrollDown); // and animate
}
function autoScrollUp(){
$(".inner").css({top:0}) // jump back
.animate({top:-$(".outer").outerHeight()},5000,"linear", autoScrollUp)
}
// fix hight of outer:
$('.outer').css({maxHeight: $('.inner').height()});
// duplicate content of inner:
$('.inner').html($('.inner').html() + $('.inner').html());
autoScrollUp();
// location.reload();
</script>
</html>
Related
I use Dompdf to generate a pdf from an html.
Before using the Dompdf library, I built the html to have a preview directly on my browser.
Here is the result when I read html via my browser:
The problem is related to Dompdf. The result is not the same as on my browser:
As you can see, the elements are not placed correctly:
I need the logo and the term "RELEVE DE COMPTE" on the same line. The
logo on the left and, "Statement of Account" in the middle.
The same goes for the company’s information. In the pdf, it’s at the
bottom.
My Dompdf function:
public function render(string $html)
{
$pdf = new Dompdf();
$pdf->loadHtml($html);
$pdf->setPaper('A3');
$pdf->render();
$pdf->stream();
}
My html/css code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Statement</title>
<style type="text/css">
body {
background-size: 100% 100%;
padding: 50px;
font-family: -webkit-pictograph, 'Roboto', sans-serif;
}
.header {
display: flex;
flex-direction: row;
}
.header-logo {
width: 30%;
}
.header-title {
width: 30%;
text-align: center;
}
.header-baseline {
color: #3E5064;
}
.spacer {
width: 100%;
border-bottom: solid 1px #E5E5E5;
margin: 1em;
}
.infos {
display: flex;
flex-direction: row;
margin-bottom: 8em;
}
.infos > div > div > p {
margin: 0;
}
.infos > div > div > h3 {
margin: 0;
margin-top: 1em;
margin-bottom: 0.3em;
}
.user-info {
width: 50%;
text-align: left;
}
.agent-info {
width: 50%;
text-align: right;
}
.statement-first-balance {
display: flex;
flex-direction: row;
}
.statement-first-balance-period {
width: 50%;
text-align: left;
}
.statement-first-balance-amount {
width: 50%;
text-align: right;
}
.statement-operations {
margin-bottom: 10px;
width: 100%;
height: auto;
}
.statement-operations-debit {
text-align: right;
}
.statement-operations-credit {
text-align: right;
}
table {
border-spacing: 0;
}
table > thead > tr {
height: 3em;
background-color: #F7F9FF;
}
table > thead > tr > th {
text-align: left;
padding: 1em;
}
table > tbody > tr {
height: 3em;
}
.statement-recap {
display: flex;
flex-direction: row;
}
.statement-recap-amount {
width: 40%;
margin-left: 60%;
}
</style>
<link
href='http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900'
rel='stylesheet' type='text/css'/>
</head>
<body>
<div class="header">
<div class="header-logo">
<img alt="agent-logo" class="agent-image"
src=""
width="70%">
<span class="agent-name"></span>
</div>
<div class="header-title">
<h1>RELEVE DE COMPTE</h1>
<p class="header-baseline">Compte - en euros</p>
</div>
<div class="header-page"></div>
</div>
<div class="spacer"></div>
<div class="infos">
<div class="user-info">
<div>
<h3>firstName lastName</h3>
<p>test address</p>
<p>11111 Town</p>
</div>
<div>
<h3>IBAN</h3>
<p>AA1111111111111111111111111</p>
</div>
<div>
<h3>BIC</h3>
<p>AZERTYUIOPQ</p>
</div>
</div>
<div class="agent-info">
<div>
<h3>Company</h3>
<p>Company address</p>
<p>11111 Town</p>
</div>
</div>
</div>
<div class="statement-first-balance">
<div class="statement-first-balance-period">
<p>du 2022-02-04 au 2022-02-27</p>
</div>
<div class="statement-first-balance-amount">
<p>Votre précédent solde</p>
<h3>216.25 €</h3>
</div>
</div>
</body>
</html>
I don’t understand why rendering from the browser is OK but the PDF is not OK. Could you please help me?
I currently have the problem that my maps my 9th map is displayed on two pages although there is still enough space on the first page. Does anyone have a suitable solution to the problem?
I tried anything: page-break-inside, page-break-before, page-break after. Anything does not work.
Picture: https://drive.google.com/drive/my-drive
index.blade snipped:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
#yield('third_party_stylesheets')
#stack('page_css')
<style>
.layout{
width: 100%;
height: 100%;
/*margin: 11mm 20mm;*/
margin-top: 10mm;
margin-bottom: 0;
margin-left: 25px;
}
.box {
/*border: 1px dashed black;*/
display: inline-block;
width: 87mm;
margin-top: -15px;
margin-bottom: 0px;
margin-left: -10px;
margin-right: -1px;;
padding-top: 15px;
}
p {
text-align: right;
}
.card{
width: 85mm;
height: 55mm;
border: 1px solid black;
.pb {
page-break-inside: always;
}
</style>
</head>
<body class="layout">
#for( $i = 0; $i < 10 ; $i++)
<div class="box">
<div class="card">
....
</div>
</div>
#if($i % 2)
<br>
#endif
#if($i % 10 == 9)
<p class="pb" style="display: none;"></p>
#endif
#endfor
</body>
</html>
I'm using mpdf in Laravel and with this package version 4.0
The problem is that I have a list of questions in different heights which have 4 options, and I don't know the exact and approximate height of every div tag which question and answer options are there, I don't want some part of my question to go to another page
All parts of my question have to be on one page and if this couldn't happen, mpdf put that question tag element on the next page (all parts of questions)
this picture is for now which is wrong:
what I want:
This image
so for this problem, I want to know the height of my question element so I can determine if the new page is needed to add a page break(same as this question on StackOverflow), or any other solution to fix my issue
this is my blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
.sub-item-answer{
float: left;
display: inline !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer-num{
width: 5%;
float:right;
}
.q_1{
margin-top: 45px !important;
}
.question{
display: inline-block;
page-break-inside: avoid !important;
position: relative;
float:right;
}
.question-row{
display: inline !important;
width: 100%;
}
.question-number{
padding: 5px;
background: #bebe27;
border-radius: 10px;
width:10% !important;
text-align: center;
color:#ffffff;
font-weight: bold;
}
.main-question{
width: 95% !important;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<div style="page-break-inside: avoid !important;" class="question q_{{$i}}">
<div class="row question-row">
<div class="question-number col-sm-1"> سوال{{$i}} </div>
<div class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</div>
</div>
#if($question->options)
<div class="question-main-container" style="float: right">
#foreach($question->options as $option)
#php
$j++;
#endphp
<div class="item-answer center-block row">
<div class="sub-item-answer-num col-sm-1">{{$j}})</div>
#if($option->title)
<div class="sub-item-answer col-sm-11">
{!! $option->title !!}
#if($option->image_url)
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
#endif
</div>
#else
#if($option->image_url)
<div class="sub-item-answer col-sm-11">
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
</div>
#endif
#endif
</div>
#endforeach
</div>
#endif
<hr>
</div>
#endforeach
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: center;direction: rtl;">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">
</htmlpagefooter>
</body>
</html>
and I tried all methods in the documentation of mpdf and this answer but results were not useful
if any other solution exists please guide me
After lots of tries, the issue solved!
the page-break-inside: avoid; doesn't work when I have a loop of block elements
I used a table for every question and put it in the main table and in it's <td> tag, the inner table now has autosize="1" which was needed
also, add this config to mPdf
$pdf->shrink_tables_to_fit = 1;
I added page-break-inside: avoid to the main table and the <tr> of questions in the loop
note that if you faced undefined index error try to solve it generally! but if like me, it doesn't fixed use error_reporting(0);
the corrected blade file:
#php
error_reporting(0);
#endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:40mm 20mm 40mm 20mm;
}
#page {
footer: pagefooter;
margin-top: 0pt;
}
#page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
p{
font-size:35px;
}
.sub-item-answer{
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer > img{
width: 100% !important;
min-height: 200px;
max-height: 500px;
}
.sub-item-answer-num{
width: 5%;
font-size: 35px;
}
.q_1{
margin-top: 45px !important;
}
.question-number{
padding: 20px !important;
background: #bebe27;
border-radius: 10px !important;
width:auto !important;
text-align: center;
color:#ffffff;
font-weight: bold;
height: auto;
font-size: 35px;
}
.main-question{
width: 95% !important;
font-size:30px;
}
.main-question > p{
font-size:30px !important;
}
.main-question > img{
width: 100% !important;
min-width: 800px !important;
max-width: 1000px !important;
min-height: 200px;
max-height: 500px;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
#php
$i = 0;
#endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
<table style="page-break-inside: avoid !important;">
#foreach($data as $question)
#php
$i++;
$j=0;
#endphp
<tr style="page-break-inside: avoid !important; min-height: 300px;">
<td>
<table autosize="1">
<tbody>
<tr>
<td><span class="question-number"> سوال{{$i}} </span></td>
<td class="main-question col-sm-11">
#if($question->title)
{!! $question->title !!}
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#else
#if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
#endif
#endif
</td>
</tr>
#if($question->options)
#foreach($question->options as $option)
<tr>
#php
$j++;
#endphp
<td class="sub-item-answer-num col-sm-1">{{$j}})</td>
#if($option->title)
<td class="sub-item-answer col-sm-11" style="font-size:35px !important;">
{!! $option->title !!}
#if($option->image_url)
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
#endif
</td>
#else
#if($option->image_url)
<td class="sub-item-answer col-sm-11">
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
</td>
#endif
#endif
</tr>
#endforeach
#endif
</tbody>
</table>
</td>
</tr>
#endforeach
</table>
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: left;direction: rtl; font-size: 15px; margin-top: 50px; padding-left:100px">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="width: 100%;">
</htmlpagefooter>
</body>
</html>
Use page-break-inside: avoid; for your block (see https://mpdf.github.io/css-stylesheets/supported-css.html)
//this is the code at the page that generates pdf
$string = get_include_contents('pdf/draydocument/index.php');
//print_r($string);
$mpdf=new mPDF();
$mpdf->WriteHTML($string);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
.heading {
font-family: Montserrat, sans-serif;
}
.body {
margin-top: 29px;
padding-top: 0px;
background-color: #fff;
font-family: 'Varela Round', sans-serif;
font-weight: 500;
}
.text-block {
font-family: Montserrat, sans-serif;
}
.text-block-2 {
font-size: 25px;
}
.text-field {
margin-right: -453px;
padding-right: 0px;
font-size: 11px;
}
.bold-text {
display: block;
margin-right: 1200px;
border: 1px solid #000;
border-radius: 9px;
color: #ffa705;
}
.paragraph {
width: 60%;
margin-right: 1200px;
margin-left: auto;
}
.div-block {
margin: -144px 0px 1px 1200px;
}
.text-block-3 {
width: 50%;
margin-right: 300px;
margin-left: -600px;
}
.heading-2 {
margin-top: 200px;
}
.heading-3 {
width: 40%;
margin-top: 117px;
margin-right: 400px;
margin-left: -32px;
color: #ffa705;
font-size: 25px;
}
.grid {
grid-template-areas: "Area";
}
.columns {
width: 35%;
border: 1px none #000;
}
.column {
border: 1px solid #000;
}
.column-2 {
border: 1px solid #000;
}
.column-3 {
border: 1px solid #000;
}
.column-4 {
border: 1px solid #000;
}
.column-5 {
border: 1px solid #000;
}
.column-6 {
border: 1px solid #000;
}
.column-7 {
border: 1px solid #000;
}
.column-8 {
border: 1px solid #000;
}
.column-9 {
border: 1px solid #000;
}
.column-10 {
border: 1px solid #000;
}
.column-11 {
border: 1px solid #000;
}
.column-12 {
border: 1px solid #000;
}
.column-13 {
padding-left: 0px;
}
.columns-2 {
padding-right: 0px;
}
.column-14 {
padding-right: 35px;
}
.column-15 {
height: auto;
margin-top: 0px;
}
.columns-3 {
height: 30px;
padding-top: 0px;
padding-bottom: 0px;
}
.column-16 {
height: 30px;
}
.column-17 {
height: 30px;
}
.column-18 {
border: 1px solid #000;
}
.column-19 {
border: 1px solid #000;
}
.column-20 {
border: 1px solid #000;
}
.column-21 {
height: 400px;
border: 1px solid #000;
}
.column-22 {
height: 400px;
border: 1px solid #000;
}
.column-23 {
height: 400px;
border: 1px solid #000;
}
.image {
width: 600px;
}
.div-block-2 {
width: 60px;
}
.text-block-4 {
width: 40%;
margin-left: -600px;
}
.columns-4 {
width: 35%;
}
.columns-5 {
width: 35%;
}
.columns-6 {
width: 35%;
}
.columns-7 {
width: 35%;
}
.columns-8 {
width: 35%;
}
.text-block-5 {
font-size: 10px;
}
.bold-text-2 {
font-size: 10px;
}
.bold-text-3 {
font-size: 10px;
}
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Fri Nov 08 2019 22:38:51 GMT+0000 (UTC) -->
<html data-wf-page="5dc492ebb03ec1759b3c5d8c" data-wf-site="5dc492ebb03ec16cc23c5d8b">
<head>
<meta charset="utf-8">
<title>Delivery Order</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="http://freightcube.net/pdf/draydocument/css/normalize.css" rel="stylesheet"/>
<link href="http://freightcube.net/pdf/draydocument/css/webflow.css" rel="stylesheet"/>
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/puneets-blank-site-1bae2e.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Varela Round:400"] }});</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="" rel="shortcut icon" type="image/x-icon">
<link href="" rel="apple-touch-icon">
</head>
<body class="body">
<div class="div-block-2"></div>
<p class="paragraph">123 E 9TH ST, SUITE 332<br>UPLAND, CA 91786<br>PHONE: 909-285-2370<br>EMAIL: ops#freightcube.net</p>
<h1 class="heading-3"> DRAYAGE DELIVERY ORDER</h1>
<div class="columns w-row">
<div class="column w-col w-col-4">
<h6>OCEAN CARRIER/SSL :<br>php code</h6>
</div>
<div class="column-2 w-col w-col-4">
<h6>LOCATION/TERMINAL :<br>php code</h6>
</div>
<div class="column-3 w-col w-col-4">
<h6>PORT :<br>php code</h6>
</div>
</div>
<div class="columns-4 w-row">
<div class="column-4 w-col w-col-4">
<h6>MASTER BOL :<br>PHP</h6>
</div>
<div class="column-5 w-col w-col-4">
<h6>ARRIVAL DATE/CUT OFF DATE :<br>PHP</h6>
</div>
<div class="column-6 w-col w-col-4">
<h6>TRUCKING COMPANY:<br>PHP</h6>
</div>
</div>
<div class="columns-5 w-row">
<div class="column-7 w-col w-col-3">
<h6>CONTAINER :<br>PHP</h6>
</div>
<div class="column-8 w-col w-col-3">
<h6>HOUSE BOL :<br>PHP</h6>
</div>
<div class="column-9 w-col w-col-3">
<h6>ENTRY NO :<br>PHP</h6>
</div>
<div class="column-10 w-col w-col-3">
<h6>CUSTOMER REFERENCE :<br>PHP</h6>
</div>
</div>
<div class="columns-6 w-row">
<div class="column-11 w-col w-col-6">
<h6>DELIVERY/PICKUP ADDRESS:<br>PHP</h6>
</div>
<div class="column-12 w-col w-col-6">
<h6>SPECIAL INSTRUCTIONS:<br>PHP</h6>
</div>
</div>
<div class="columns-7 w-row">
<div class="column-18 w-col w-col-3">
<h6>NO. OF PKGS</h6>
</div>
<div class="column-19 w-col w-col-6">
<h6>DESCRIPTION OF GOODS</h6>
</div>
<div class="column-20 w-col w-col-3">
<h6>WEIGHT</h6>
</div>
</div>
<div class="columns-8 w-row">
<div class="column-21 w-col w-col-3">
<div class="text-block-5"><strong>PHP CODE FOR NO. OF PACKAGES</strong></div>
</div>
<div class="column-22 w-col w-col-6">
<div><strong class="bold-text-2">PHP FOR DISCRIPTION</strong></div>
</div>
<div class="column-23 w-col w-col-3">
<div><strong class="bold-text-3">PHP FOR WEIGHT</strong></div>
</div>
</div>
<h4>RECEIVED IN GOOD ORDER BY :<br></h4>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
link to codeI am using mpdf for my php application to generate pdf pages. I recently generated an html page using a drag and drop html builder which also provides source code with css. so i copied the exact css on the page using . When mpdf generates the pdf it is not showing css correctly. it looks like width issues but i tried to reduce width of all divs and still encounter the same problem just with smaller appearing columns. please help. here is how it shows and how it should show
mPDF has limited abilities in handling floated blocks. Use a HTML table to make sure it is displayed correctly (your data is somewhat tabular, so it is the right thing to do anyway).
My partner and I are trying to make a shopping cart site for a school project. We are having trouble with our navbar.
We use the exact same files for styling this specific navbar. (its called universal.css and inherited by each page)
Also, the navbar HTML code is in a PHP file included via script (same script for both).
However, index.php of the products is not vertically aligned with the pull-right statements, though the index.php of the whole website is.
What's the problem?
(The JS file of products and index do not do anything different to the navbar They are essentially the same).
Here is my code, we host at main page https://webdes-nikhilb99.c9users.io/ and products page https://webdes-nikhilb99.c9users.io/products
Mainnav.css
#media (max-width: 1325px) {
.navbar-header {
float: none;
}
.navbar-collapse.collapse.in { display: block!important; }
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
.glyphicon-search{
color:white;
}
#search-btn{
background-color: #337ab7;
}
Universal.css
#import url('productModal.css');
#import url('bottomNav.css');
#import url('mainNav.css');
row-title{
color:#337ab7;
font-weight:bold;
font-size:30pt;
margin-top:60px;
width:100%;
padding-bottom:50px;
}
#content-wrapper{
background-color: black;
width:100%;
opacity: 0.9;
}
#content-wrapper .content p{
color:white;
}
.content{
color:#337ab7;
font-weight:bold;
font-size:20pt;
text-align:center;
}
.content p{
font-size:10pt;
}
#mainNav{
background-color: black;
font-family: Montserrat;
font-weight: 700;
font-size:10pt;
border-bottom: 4px solid #337ab7;
background: rgba(0,0,0,0.9);
}
#img1{
position:absolute;
top:0;
left:0;
width:100%;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
}
.navbar-custom .navbar-toggle .icon-container .icon-bar {
background-color: #000;
}
.navbar-custom .navbar-toggle .icon-container{
background-color:#000;
}
.navbar-nav .dropdown a{
color:#337ab7;
font-size:18pt;
text-decoration:none;
}
.blacktext{
color:#337ab7;
font-size:18pt;
}
/*Drop down menu*/
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu{
/**Change up the stuff in the dropdown here*/
}
.dropdown{
line-height:95px;
}
.navbar-nav .dropdown .dropdown-toggle{
font-size:30pt;
}
.navbar-nav > li >a{
line-height:65px ;
}
.navitem{
font-size:30pt;
}
.navbar-nav > li >a:focus{
background-color:transparent;
}
#loginWindow .modal-dialog .modal-footer{
text-align: left !important;
}
body{
padding-top: 65px;
}
.icon-bar{
background-color: #fff;
line-height:65px;
font-size:30pt;
}
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one */
display: flex;
align-items: center;
}
body{
background-color: black;
}
/*.btn-success{
background-color: #337ab7;
}
.btn-success:hover{
background-color:blue;
}*/
/*Login and Registration buttons*/
.btn-primary{
background-color:#337ab7;
}
.btn-primary:focus{
background-color:#337ab7;
}
.btn-primary:hover{
background-color:white;
color:#337ab7;
}
.navbar-nav > li >a:hover{
background-color:transparent;
color:white;
}
#logo{
margin-left:10px;
margin-top:10px;
margin-right:20px;
margin-bottom:3px;
}
#nikhil{
color:white;
}
#yadu{
color:white;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 50px;
border-radius:25px;
opacity:0.95;
border: 3px double white;
}
.active a{
color:white !important;
}
.active a:hover{
color:white !important;
}
.active a:focus{
color:white !important;
}
body{
background-image:url("http://www.legionreport.com/wp-content/uploads/2014/04/blakegriffindunk.jpg");
}
#mtt{
color:#337ab7;
}
#bballfam{
height:200px;
width:80%;
}
Products page:
<html>
<head>
<title>Products</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/css/products.css">
</head>
<body>
<div class="container">
<?php
include('../snips/loginModal.php');
include('../snips/registrationModal.php');
include('../snips/menuMain.php');
?>
<div id='content-wrapper'>
<div class="row">
<div class="col-md-4 info basketball-info">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info football-info">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
<div class="col-md-4 info soccer-info">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
</div>
</div>
<script type="text/javascript">
$("#srch-term").css('width', $(window).width()).css('right','-9%');
$(".bottom-nav").css('display','none');
</script>
<!--<div class="row">
<div id='basketball-info' class="info col-md-12">
<h2 class="title text-center">Basketball</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='football-info' class="info col-md-12">
<h2 class="title text-center">Football</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div>
</div>
<div class="row">
<div id='soccer-info' class="info col-md-12">
<h2 class="title text-center">Soccer</h2>
<div class="apparel">
</div>
<div class="balls">
</div>
<div class="footwear">
</div>
<div class="gear">
</div>
<!--Alphabetical order
</div> -->
</div>
</div>
</div>
<?php
include('/home/ubuntu/workspace/snips/bottomNav.php');
?>
<?php
include('/home/ubuntu/workspace/snips/productPageModal.php');
?>
<script src="/js/products.js"></script>
<script type="text/javascript">
// $(".title").click(function(){
// $("#productsPage .modal-title").text($(this).text());
// });
// $(".bottom-nav").css('left','0');
</script>
</body>
</html>
Main Page:
<!DOCTYPE HTML>
<html>
<head>
<title>Baller Sporting Goods</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/index.css">
<link href='//fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/index.js" type="text/javascript"></script>
<body>
<?php
/*Login page is a Bootstrap modal included on the main page. See snips/loginModal.php*/
include('snips/loginModal.php');
/*Registration page is a Bootstrap modal included on the main page. See snips/registrationModal.php*/
include('snips/registrationModal.php');
include('snips/menuMain.php')
?>
<div class="container" id="wrapper">
<div id='content-wrapper'>
<div class="row">
<h2 class="text-center row-title" id='mtt'>
<img class='center-block' id = "welcome" src="img/welcome.png" width="80%"/>
<br>
<i>Where Ball Really Is Life</i>
<br>
<br>
</h2>
<div class="col-md-9 content center-block">
Online Services
<p>
At Baller Sporting Goods, we offer a variety of services available to many devices.
On our site, you may use our always available quick-search that will locate the exact item
you need in a matter of seconds.
Or, if you like to shop around yourself, you can look over our exhorbitant list of products
on our site by clicking on the <a href='/products/'>Sports</a> icon on the top. We implement
an organized structure of products that sort by sport, company, and type of equipment. Check
it out!
</p>
</div>
<div class="col-md-9 content center-block">
Our Products
<p>
We started in 1991 in the garage of two partners: Nikhil Bharani & Yadunandan Pillai.
Both were high school students tired of studying; so they decided to take the easy way
out and start a business.
They accepted a small loan of one million dollars, which they used on buying the necessities
of a business: products. Eventually, the garage was full of brand new products from medium-scale
companies like ESPN and Dicks Sporting Goods, which they sold for 50 cents on EBay.
</p>
<p>
However, one million dollars is quite a small amount, so they ran out quicker than they planned.
The two collaborators then decided to escape loan sharks by moving to an island outisde US jurisdiction
and starting a shady business.
This business, today, is the most legit one in the world: Baller Sporting Goods.
We sell numerous performance-enhancing drugs and other nutritional supplements along with
imported goods from richer companies like Hong Kong.
We also sell purposefully torn up clothing made by hand.
Our best products are the cubic soccer balls.
</p>
</div>
<br>
</div>
<?php
include('snips/bottomNav.php');
?>
</div>
<!--<script src="/js/libs/slideshow.js"></script>-->
<script src="/js/index.js"></script>
</body>
</html>
Index.css
#import url('universal.css');
#searchbar{
margin-right:auto;
margin-left:auto;
width:50%;
}
#media screen and (min-width: 1200px){
.content{
left:12.5%;
}
}
.content{
padding-bottom: 50px;
}
#media screen and (max-width:800px){
#content-wrapper{
padding-right:40px;
padding-left:40px;
}
}
#wrapper{
width:100%;
height:100%;
}
#searchbar #searchForm{
color:blue;
margin-left: auto;
margin-right:auto;
}
#title h2{
font-family: Montserrat;
font-weight: bold;
color:black;
text-align:center;
margin-top:65px;
}
#searchbar #searchForm input[name='search']{
background-color:#e9e9e9;
}
#slideshoww{
margin-top:70px;
margin-right:auto;
margin-left: auto;
position:absolute;
width:100%;
opacity:0.3;
}
#searchbar #searchForm #bar_img{
font-size:25pt;
}
#welcome{
width:95%;
}
#bar_img{
color:black;
}
#content-wrapper .row-title i{
font-size:20pt;
color:lightGrey;
}
#content-wrapper{
position:absolute;
left:10%;
width:80% !important;
margin-top: 100px;
border-radius:25px;
opacity:0.90;
border-right: 3px double white;
border-left: 3px double white;
font-family:Montserrat;
}
.col-md-6{
left:25%;
}
Products.css
#import url('universal.css');
#media screen and (min-width:990px){
.col-md-4{
border-right: 4px solid #337ab7;
}
.col-md-4:last-child{
border:none;
}
}
.col-md-4{
text-align:center;
font-family: Montserrat;
}
.col-md-4 .main-link{
font-size:20pt;
color:white;
font-weight:bold;
}
.info .title{
font-size:20pt;
color:#337ab7;
font-weight:bold;
}
#content-wrapper{
background:rgba(0,0,0,0.9);
}