code:
<style>
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
#bot {
margin-bottom: 2em;
}
#left {
font-size: 14px;
float: left;
width: 42%;
color: #000;
}
#right {
font-size: 14px;
float: right;
width: 58%;
color: #000;
}
table, td, th {
border: 1px solid #000;
text-align: left;
font-size: 14px;
font-weight: inherit;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
padding: 15px;
}
#pp {
font-size:14px;
color:#000;
}
.table-responsive {
overflow-x: hidden!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding:0px!important;
}
</style>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success" style="float: right;" onclick='printDiv();'>Print Sheet</a>
</div>
<div id="print_wrapp">
<div class="col-md-12" id="bot">
<div class="col-md-2">
<img src="<?php echo base_url(); ?>uploads/images/Lingayas Vidyapeeth Logo.png" class="img-responsive" style="width: 110px;">
</div>
<div class="col-md-10">
<div class="center">
<h3>
Lingaya's Vidyapeeth, Fraidabad<br>
Award Sheet<br>
End Semester Examination<br>
(May-June, 2019)
</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div class="left">
<p>Department: </p>
</div>
<div class="right">
<p><?php echo $award[0]['department_name']?></p>
</div>
<div class="left">
<p>Program/Course: </p>
</div>
<div class="right">
<p><?php echo $award[0]['classes']?></p>
</div>
<div class="left">
<p>Subject Name: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject']?></p>
</div>
<div class="left">
<p>Session: </p>
</div>
<div class="right">
<p><?php echo $award[0]['session']?></p>
</div>
</div>
<div class="col-md-6">
<div class="left">
<p>Semester: </p>
</div>
<div class="right">
<p><?php echo $award[0]['yearsOrSemester']?></p>
</div>
<div class="left">
<p>Subject Code: </p>
</div>
<div class="right">
<p><?php echo $award[0]['subject_code']?></p>
</div>
<div class="left">
<p>Maximum Marks: </p>
</div>
<div class="right">
<p></p>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-12">
<div class="table-responsive">
<table id="example1" class="table table-striped table-bordered table-hover dataTable no-footer">
<thead>
<th>S.No.</th>
<th>Roll No.</th>
<th>Marks(In Figure)</th>
<th>Marks(in Words)</th>
</thead>
<tbody>
<?php
$i=1;
foreach($award as $row)
{
?>
<tr>
<td><?php echo $i; ?></td>
<td><?php echo $row['roll']; ?></td>
<td></td>
<td></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-12" id="bot">
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Pass: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
<div class="col-md-6">
<div id="left">
<p>Total No. of Student Fail: </p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('print_wrapp');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/bootstrap/css/bootstrap.css" type="text/css" /><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
In this code I am simply run print content inside div <div id="print_wrapp"> by click function i.e printDiv and its working properly but the problem is that print preview css not showing div content properly and an image is mention below:
and my original page look like:
So, How can I fix this problem? Please help me.
Thank You
You can apply the style sheet too both print and screen using media='screen,print'
<link ../bootstrap.min.css' rel='stylesheet' media='screen,print'>
or
<link ../bootstrap.min.css' rel='stylesheet' media='all'>
When we want to apply some style when printing a page, we need to apply the styles using #media print. Then only the style will apply for windows print function.
Style.css
#media print
{
.center {
float: left;
text-align: center;
}
.center h3 {
color: #000;
font-weight: 600;
}
.left {
font-size: 14px;
float: left;
width: 30%;
color: #000;
}
.right {
font-size: 14px;
float: right;
width: 70%;
color: #000;
}
}
Then link the css file where you want to print the page with style.
<link rel="stylesheet" type="text/css" href="Style.css">
Call the Print Function on Button Click
<button onclick="printPage()" class="center">Print</button>
<script>
function printPage()
{
print();
}
</script>
Related
I am trying to generate a bill for my system in Laravel, for which I have created a blade with my bill format as below:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Bill</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
<style type="text/css" media="all">
body { font-family: "Roboto", serif; font-size: 0.7rem; font-weight: 400; line-height: 1.4; color: #000000; }
.table { color: #000; }
.table td, .table th { border-top: 1px solid #000;
border-bottom: 1px solid #000;}
.table thead th { vertical-align: bottom; border-bottom: 2px solid #000; }
.small-heading{
font-size: 0.8rem;
border: groove;
}
#sign {
position: relative;
min-height: 150px;
}
#sign-content {
position: absolute;
bottom: 0;
}
#thankyou{
position: absolute;
bottom: 0;
right:0;
}
</style>
</head>
<body class="bg-light">
<div class="container-fluid pt-2" style="border:1px solid black;">
<!-- Invoice heading -->
<table class="table table-borderless">
<tbody>
<tr>
<td class="border-0">
<div class="row">
<div class="col text-center text-left mb-3">
<p>Counter</p>
</div>
<div class="col-md text-center mb-3 mb-md-0" style="min-width: 50%">
<h2 class="mb-1"> DIAMOND </h2>
</div>
<div class="col text-center text-md-right">
<p>Phone: 78787878789
</p>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col">
<div class="table-responsive-xl" style="min-height: 500px">
<table class="table" style="margin-bottom: 0; width:100%;">
<thead>
<tr>
<th>क्र.सं.<br>S.N </th>
<th>Description of Goods</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td >Tilhari</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col-md mt-0 text-md-left mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black;
border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"> <strong>Carat</strong> </p>
<div class="row">
<div class="col-md-6 text-md-center">
24 Carat 100 <br>
</div>
<div class="col-md-6 text-md-center">
24 Carat 100<br>
</div>
</div>
</div>
<div class="col-md mb-3 mb-md-0" style="max-width:23% ;border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
<p class="small-heading mb-2 text-center mt-3"><strong>Imp</strong></p>
</div>
<div class="col-md mb-3 mb-md-0" style="border-top:solid 1px black; border-right:solid 2px black; border-bottom:solid 1px black;">
</div>
<div class="col" style="padding-left: 0">
<table class="table" style="margin: 0">
<tbody>
<tr>
<td colspan="12">
</td><td class="text-right">Total</td>
<td>$2,400.00</td>
</tr>
</tbody>
</table>
<div id="sign" class="col" style="height: 150px; border-bottom:1px solid black">
<span id="thankyou">Thank you!</span>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md">
<div class="row">
Email: <u></u>
</div>
</div>
<div class="col-md">
On Sale!
</div>
<div class="col-md text-center ml-5" >
<p style="text-align: left">981111111
</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
I have used dompdf to generate the bills but upon generating the bill, it is generated succesfully but the layout is all messed up. It is not as it seem in the browser.
In the browser:
pdf generated:
How can I fix the issue?
Through my research, I found out that Dompdf does not yet support Bootstrap grid system, due to which my contents were getting overlapped. I re-wrote all the css and the issue got fixed.
I want to insert an arrow image between each div with the class product-icon in a WordPress loop using the ::after CSS pseudo-element. Right now the arrow shows up after every product-icon div the loop populates, but I want it to be hidden after the last one (and the number of divs displayed changes depending which page you're on). I'm guessing I'll need to change the class of the last div in the loop, but I'm not sure how to do that. Here's an HTML version so you can see what it should look like:
<section id="case-study-product-overview" class="horizontal">
<div class="max-container">
<div id="product-map-container">
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 1</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 1</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 2</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 2</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
<div>
<div class="product-icon"><img src="https://cdn4.iconfinder.com/data/icons/basic-for-user-interface-vol-1/24/add-_plus-_create_-square-_Add_Button-512.png"><p class="icon-subtitle">Icon 3</p></div>
<div class="product-card">
<h3 class="product-overview-title green-text">Title 3</h3>
<img class="product-image" src="https://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png">
<p class="blurb">Lorem ipsum dummy paragraph text.</p>
</div>
</div>
</div>
</div>
</section>
here's the PHP I am ACTUALLY working with:
<section id="case-study-product-overview" class="horizontal">
<div class="max-container">
<h2 class="cs-heading eaton-blue-text">Product Overview</h2>
<div id="product-map-container">
<?php if ( have_rows('product_overview_map') ): ?>
<?php while( have_rows('product_overview_map') ): the_row(); ?>
<div>
<!-- ** This line is what the arrow should come after, except the last one** -->
<div class="product-icon"><img src="<?php echo get_sub_field('product_overview_icon'); ?>"/>
</div>
<!-- -->
<p class="icon-subtitle"><?php echo get_sub_field('product_overview_icon_label'); ?></p>
<div class="product-card">
<h3 class="product-overview-title eaton-blue-text"><?php echo get_sub_field('product_title'); ?></h3>
<img class="product-image" src="<?php echo get_sub_field('product_image'); ?>" />
<p class="blurb"><?php echo get_sub_field('product_description'); ?></p>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
</section>
and the CSS:
#case-study-product-overview .ecosystem-diagram {
min-height:650px;
margin-top:3%;
}
#case-study-product-overview .ecosystem-item {
position:absolute;
width:250px;
align-items:center;
margin-left:-125px;
margin-top:-100px;
}
#case-study-product-overview .image {
width:300px;
height:300px;
display:flex;
align-items:flex-end;
}
#case-study-product-overview .image img {
max-height:250px;
max-width:245px;
}
.product-icon::after {
content: url(http://wordpress-dev.tcc.etn.com/wordpress/iot/wp-content/uploads/sites/11/2019/07/arrows.png);
position: absolute;
top: 25px;
margin:0 32px;
}
.last-product-icon::after {
content:'';
}
.product-icon > img {
width: 50px;
height: 50px;
}
#product-map-container {
display: flex;
margin: 50px 0;
justify-content: center;
position: relative;
}
#product-map-container > div {
margin: 10px;
text-align: center;
}
.product-card {
box-shadow: 1px 1px 6px 1px #999;
max-width: 240px;
min-height: 475px;
padding: 10px;
}
.product-image {
width: 200px;
margin:auto;
}
Any help would be greatly appreciated. Thanks!
I have a website which is using the CodeIgniter framework. In my one page I should get some data and list them. and I don't want to use the scrollbar on this page.
how can I get 3 data in cycle with jquery?
This code is getting just 1 data in cycle but I want to get 3 data in the cycle.
<ul class="list">
<?php foreach ($a_list as $hd) { ?>
<div id="content-1">
<a href="single.html">
<li>
<section class="list-left" style="border:0px solid red; width:30%; height:90px;">
<section class="list" style="border-bottom:1px solid red; width:100%; margin-top: 0; text-align: center">
<h6 class="title" >Hasta</h6>
</section>
<p class="adprice" style="color:black; text-align: center; font-size: -5;"><?= $hd->h_adi ?> <?= $hd->h_soyadi ?>
</section>
<section class="list-left"style="border:0px solid red; width:30%; height: 90px">
<section class="list" style="border-bottom:1px solid red; width:100%; margin-top: 0; text-align: center">
<h5 class="title" >Doktor</h5>
</section>
<p class="adprice" style="text-align: center">
<?= $hd->a_unvan ?>
<?= $hd->dr_adi ?>
<?= $hd->dr_sadi ?>
<br>
<p class=catpath style="text-align: center; margin-top: 0px !important; color:black">
<?=$hd->a_brans?>
Uzmanı
</p>
</p>
</section>
<section class="list-left" style="border:0px solid red; width:30%;height: 90px">
<section class="list" style="border-bottom:1px solid red; width:100%; margin-top: 0; text-align: center">
<h5 class="title" >Durum</h5>
</section>
<p class="adprice" style="color:blue;text-align: center"><?=$hd->h_durum?></p>
</section>
<div class="clearfix"></div>
</li>
</a>
</div>
<?php } ?>
<script src='<?=base_url()?>/assets/js/jquery.min.js'></script>
<script>
var divs = $('div[id^="content-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
</script>
<a href="single.html">
</a>
</ul>
zxcf
I try to generate pdf from html with css styles ,
I use dompdf for this.
In css there are floats too.
This is my css and html code:
$dompdf = new DOMPDF(); //create object
//load html with css
$dompdf->loadHtml('<html>
<head>
<style>
#first_head,#second_head,#content_invoice{width: 100%;}
.has-65 {
width: 65%;
float:left;
}
#product_invoice_table tr th:last-child, #product_invoice_table tr td:last-child {
text-align: right;
}
.has-35 {
width: 35%;
float:right;
}
.has-55 {
width: 55%;
}
.has-45 {
width: 45%;
}
.clearFix{
float:none;
clear:both;
}
#second_head{
margin-top: 100px;
}
#template_invoice{
padding: 50px 80px 50px 80px;
margin: 0 auto;
margin-top: 30px;
margin-bottom: 30px;
font-size: 20px;
color: #000!important;
font-family: Arial,serif!important;
}
#content_invoice{
width: 100%;
float: left;
margin-top: 150px;
}
#product_total_info{
float: right;
margin-top: 100px;
}...
</style>
</head>
<body>
<div id="template_invoice">
<div id="first_head">
<div id="logo_invoice" class="has-65">
<img src="logo.PNG" width="280px">
</div>
<div id="main_header_info" class="has-35">
mandelaugengroup gmbh
Schaffhauserstrasse 611
CH - 8052 Zürich
Tel.: +41 79 205 05 05
info#babboe.ch
www.babboe.ch
MWST/UID-Nr. CHE-254.427.754
</div>
</div>
<div class="clearFix"></div>
<div id="second_head">
<div id="lead_address" class="has-65">
<span id="lead_name">ghmgmgm</span><br>
<span id="lead_street">mhgmhm</span><br>
<span id="lead_postcode_city">mbmbmjggjg</span><br>
</div>
<div id="lead_invoice_info" class="has-35">
<div class="span_padding_invoice">
<span class="invoice_main_span">Rechnungs-Nr.</span>
<span id="lead_rechnungs_nr" class="right-clmn-span">jghghjgh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Kunden-Nr.</span>
<span id="lead_kunder_nr" class="right-clmn-span">ghjgvj</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Datum</span>
<span id="invoice_datum" class="right-clmn-span">hhhhhhh</span>
<br>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span">Fallig am</span>
<span id="invoice_falling_am" class="right-clmn-span">bjbbb</span>
<br>
</div>
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span total_bold">Total</span>
<span id="lead_total" class="right-clmn-span">iljkkj</span>
<br>
</div>
</div>
</div>
<div id="content_invoice">
...
<table id="product_invoice_table" width="100%">
....
</table>
</div>
<div class="has-65"></div>
<div id="product_total_info" class="has-35">
<div class="span_padding_invoice lead_total_container">
<span class="invoice_main_span">Total exkl.MWST</span>
<span class="right-clmn-span">CHF <span id="total_sum"></span></span>
</div>
<div class="span_padding_invoice">
<span class="invoice_main_span" id="mwst_num"></span>
<span class="right-clmn-span">CHF <span id="total_percant"></span></span>
<br>
</div>
<div class="span_padding_invoice lead_total_container_bold">
<span class="invoice_main_span">Total</span>
<span class="right-clmn-span">CHF <span id="total_end"></span></span>
<br>
</div>
</div>
<div id="footer_invoice">
...
</div>
</div>
</body>
</html>');
$dompdf->render();
$dompdf->stream("hello.pdf");
But my css doesnt work good. I add css as .
I get this result:
So how can I solve this problem?
Maybe I must set some settings for my css or settinhs for page?
Thanks for any help.
I am pretty sure that float is the cause of the problem
Depending on the dompdf version you can use def("DOMPDF_ENABLE_CSS_FLOAT", true); in dompdf_config.inc.php but this is not a good practice
I would suggest to use display:inline-block or even position:absolute which are fully compatible.
I have inside the loop two DIV and I need put a style to one and another to the other DIV.
I do not know if I can do it with PHP, JS or CSS. This is my code:
-- the styles (this styles are in the same page, because I have a general style that I include) --
<?php
$style_1 = '<style>
.content .postcontent-0 .layout-item-0 { margin-bottom: 7px; }
.content .postcontent-0 .layout-item-1 { border-spacing: 10px 0px; border-collapse: separate; }
.content .postcontent-0 .layout-item-2 { border-top-style:solid; background: #ffffff; }
</style>';
$style_2 = '<style>
.content .postcontent-0 .layout-item-0 { color: #083752; background: ; border-collapse: separate; }
.content .postcontent-0 .layout-item-1 { color: #083752; }
.content .postcontent-0 .layout-item-2 { border-style:Double; border-radius: 15px; }
.content .postcontent-0 .layout-item-3 { padding-right: 10px;padding-left: 10px; }
</style>';
?>
-- the view
<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
<div class="content-layout-wrapper layout-item-0">
<div class="content-layout layout-item-1">
<div class="content-layout-row">
<div class="layout-cell layout-item-2">
<p> Text #1 </p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_1-->
<!--Here begin the STYLE_2-->
<div class="postcontent postcontent-0 clearfix">
<div class="content-layout-wrapper layout-item-0">
<div class="content-layout-row">
<div class="content-layout layout-item-1">
Text #2
</div>
<div class="layout-cell layout-item-2" >
<p>
Text #3
</p>
</div>
</div>
</div>
<div class="content-layout">
<div class="content-layout-row">
<div class="content-layout layout-item-3">
<p>Text # 4</p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_2-->
<?php } // for i ?>
You can use different class name for two separate div but if you want to use this without change the existing class name then use inline css.Try this code:
<?php for ($i = 0; $i < $contador; $i++) { ?>
<!--Here begin the STYLE_1-->
<div class="content-layout-wrapper layout-item-0" style="margin-bottom: 7px;">
<div class="content-layout layout-item-1" style=" border-spacing: 10px 0px; border-collapse: separate; ">
<div class="content-layout-row">
<div class="layout-cell layout-item-2" style="border-top-style:solid; background: #ffffff;">
<p> Text #1 </p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_1-->
<!--Here begin the STYLE_2-->
<div class="postcontent postcontent-0 clearfix">
<div class="content-layout-wrapper layout-item-0" style="color: #083752; background: ; border-collapse: separate;">
<div class="content-layout-row">
<div class="content-layout layout-item-1" style="color: #083752;">
Text #2
</div>
<div class="layout-cell layout-item-2" style"border-style:Double; border-radius: 15px;">
<p>
Text #3
</p>
</div>
</div>
</div>
<div class="content-layout">
<div class="content-layout-row">
<div class="content-layout layout-item-3" style="padding-right: 10px;padding-left: 10px;">
<p>Text # 4</p>
</div>
</div>
</div>
</div>
<!--Here END the STYLE_2-->
<?php } // for i ?>