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.
Related
href is not able to clickable on carousel due to jQuery
Carousel is using jQuery for automated sliding and when I'm placing an element with a href tag it's not working, also as the project is using multiple JavaScript files for fast uploading. I'm not able to identify how to make href clickable on carousel.
How can I overwrite existing jQuery to make only that particular href clickable?
<li class="ds cover-image animated scaleAppear">
<img src="<?php echo $Domain;?>img/slide2.jpg" alt="img">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="row text-center" style="text-align:center;">
<div id="arrow-left" class="arrow">
<div class="col-sm-6 ">
<h6 id="firstLineh6"><span style="font-size:50px;">■</span>Farming-as-a-Service</h6>
<h1 id="firstLineh1">Advance,Affordable,<br>Accessible</h1>
<div class="vertical">
<p id="contP">
We are making advanced farm mechanization services affordable to farmers through the
Pay and Use Model
</p>
</div>
<a id="carbtn1" href="https://google.com">Traxi Customer</a>
<a id="carbtn2" href="https://google.com">Traxi Partner</a>
<div class="col-sm-6 fade-in text-center" style="text-align:right;"></div>
</div>
<div class="intro_layers_wrapper">
<div class="intro_layers">
<!-- <div class="intro_layer">
<p class="intro_before_featured_word pTextSize">Looking For Mechanized Crop Cultivation? </p>
<p class="text-capitalize intro_featured_word pTextSize"> We are the "Solution" </p>
<br>
Tell Us Your Farming Need
</div> -->
</div>
</div>
</div>
</div>
</div>
</li>
Hey there as I got that your all links working with above code.
https://imgur.com/a/DeZd2K9
But if you still facing issue with your Code you can try given below code for slider-
.bs-fullscreen {
height: 100%;
}
.bs-fullscreen .carousel,
.bs-fullscreen .item,
.bs-fullscreen .active {
height: 100%;
}
.bs-fullscreen .carousel-inner {
height: 100%;
}
.carousel-bg .carousel-inner .item {
background-color: darkslategrey;
background-size: cover;
background-position: center;
min-height: 664px;
}
.banner-text {
position: absolute !important;
top: 215px;
left: 12%;
background: rgba(0, 0, 0, 0.5);
padding: 47px 80px;
}
.banner-text p {
font-size: 16px;
font-family: 'Roboto';
color: #fff;
font-weight: 600;
}
.banner-text h2 {
font-size: 42px;
font-family: 'Poppins';
font-weight: 600;
color: #fff;
line-height: 44px;
}
.banner-text a {
font-size: 16px;
color: #000;
font-weight: 800;
background: #fff;
padding: 10px 20px;
font-family: 'Roboto';
}
.banner-text span {
font-size: 48px !important;
}
#media only screen and (max-width:600px) {
.banner-text span {
font-size: 34px !important;
}
}
#media only screen and (max-width:400px) {
.banner-text {
position: center;
}
}
<!doctype html>
<html>
<body>
<div class="bs-fullscreen">
<div id="carousel-example" class="carousel slide carousel-bg" data-ride="carousel" data-interval="3000">
<!-- Bottom dots {indicators} -->
<div class="carousel-inner" role="listbox">
<div class="item active"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/4-3-1.jpg);">
<div class="banner-text">
<p>Eco Friendly | Feathery Light Perfect Fit</p>
<h2>50 WASH <br><span>UNDERWEARS</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Desktop-View-Home-Page-banner-1280x720px-1.jpg);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
<div class="item mob-banner1"
style="background-image: url(https://www.ashleyandalvis.com/wp-content/uploads/Confidence-INSIDE-MOBILE-SLIDER-1280-%C3%97-720px.png);">
<div class="banner-text">
<p>Memory Stretch | Skinny Soft Modal</p>
<h2>CONFIDENCE <br><span>INSIDE</span></h2>
Shop Collection
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="right carousel-control" href="#carousel-example" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</div>
</body>
</html>
Hope you like the answer.
I've designated a background image for the whole page. On top of this I would like to have a header, with a solid background color, with my logo on the left side, business name in the middle, and my name on the right side.
Below this I would like 3 columns for the main page of my site, each probably with their own background color if that's possible.
I'm trying to use bootstrap to give my header three sections (logo-text-name), and I'd like the text to be centred.
The reason I have so much padding is because the logo kept hanging out the bottom of the header.
Now I'm sure there's a lot I'm doing wrong, but if anyone could help I'd be eternally grateful. Thanks.
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 30px 10px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col-xs-2">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
Bootstrap 5 really brings flexbox to the table, so I'd use that rather than wrestling with columns, which can be troublesome due to inflexibility.
Here I've replaced your container, row, and columns with a simple flex row. Item alignment on the cross axis centers things up. The center element has Bootstrap's flex-fill class on it to make it stretch.
Also notice that I've replaced your custom margin and padding with Bootstrap
spacing classes to clean things up.
body {
background-image: url(https://via.placeholder.com/1200);
}
header {
background-color: #539e8a;
color: #f6c5be;
border-radius: 25px;
}
#logo {
width: 160px;
height: 140px;
}
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<header class="mt-3">
<div class="d-flex align-items-center">
<img id="logo" src="https://via.placeholder.com/160x140" alt="cakes 'n' bakes logo" class="logo m-3">
<div class="flex-fill text-center">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="px-3">
<p>My Name</p>
</div>
</div>
</header>
<div class="container">
<div id="main" class="row">
<div id="col1" class="col-sm-4">
<h2> col 1 </h2>
</div>
<div id="col2" class="col-sm-4">
<h2> col 2 </h2>
</div>
<div id="col3" class="col-sm-4">
<h2> col 3 </h2>
</div>
</div>
</div>
</body>
I make some changes and add somethings to your code so I hope I hope I could help you!
body {
background-image: url(images/bg.jpg);
}
header {
background-color: #539e8a;
padding: 20px 10px 0px 0px;
color: #f6c5be;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#logo {
width: 160px;
height: 140px;
}
#top-part-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.col-xs-2 {
display: flex;
flex-direction: column;
justify-content: center;
}
.col-xs-8 {
display: flex;
flex-direction: column;
justify-content: center;
}
.header-2 {
padding: 20px 10px 0px 0px;
color: #000000;
border-radius: 25px;
margin-top: 10px;
height: 180px;
}
#top-part-2 {
display: flex;
flex-direction: row;
justify-content: space-between;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<header>
<div class="container" id="top-part-1">
<div class="col-xs-2">
<img id="logo" src="images/logo.png" alt="cakes 'n' bakes logo">
</div>
<div class="col-xs-8">
<h1>Cakes 'n' Bakes</h1>
</div>
<div class="col-xs-2">
<p>my name</p>
</div>
</div>
</header>
<div class="header-2">
<div class="container" id="top-part-2">
<div class="col-xs-2">
<h2> col 1 </h2>
</div>
<div class="col-xs-8">
<h2> col 2 </h2>
</div>
<div class="col-xs-2">
<h2> col 3 </h2>
</div>
</div>
</div>
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>
I want to create the same of that html style with wordpress contact form 7 , i just need to make that design work functional with wcf 7
Link
and my example html code :
<div class="form-group">
<label>Destination(s)</label>
<ul class="tags">Fes</ul>
<ul class="tags">Hight Atlas Mountains</ul>
<ul class="tags">Marrakech</ul>
<div class="destinations-wrap">
<input type="text" class="form-control icon icon-location" name="locations_search" placeholder="e.g. Iceland"
autocomplete="false">
<input type="text" class="destinations-suggestion" disabled>
</div>
<button class="btn btn-primary destinations-wrap-btn" tabindex="-1">+ Add Another</button>
</div>
This my example
You can use only html, and pure javascript. Bellow My Code
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="foundlose/vendor/meotip/style.css">
<meta charset="UTF-8">
<style type="text/css">
*{
font-family: "Raleway";
}
span{
margin-right: 10px;
margin-bottom: 10px;
padding: 5px 15px;
background-color: #E13547;
color:#FAFAFA;
font-weight: bold;
display:inline-block;
cursor: pointer;
}
#destination-list{
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="indef">
<h1>Travel Information</h1>
<h6>Destiantion(s)</h6>
</div>
<div id="destination-list">
</div>
<div class="indef">
<input type="text" name="" id="destination-input">
</div>
<div class="indef">
<button id="add">Add</button>
</div>
</div>
<script type="text/javascript">
var destinationList = document.getElementById('destination-list'),
destinationInput = document.getElementById('destination-input'),
add = document.getElementById('add');
add.onclick = function(){
var addInput = document.createElement('span'), list = destinationList.getElementsByTagName('span');
addInput.setAttribute("class",destinationInput.value);
addInput.textContent = destinationInput.value + " ❌";
destinationList.appendChild(addInput);
for(var i = 0; i < list.length; i++){
list[i].onclick = function(){
this.parentNode.removeChild(this);
}
}
}
</script>
</body>
</html>
Here is your Solution with bootstrap 4
HTML
<div class="container">
<div class="jumbotron">
<h4>
Travel Information
</h4>
<br>
<h6>
Destination(s)
</h6>
<span class="badge badge-secondary">New <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">High Atlas Mountains <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Marrakesh <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Moroccan Sahara <i class="fa fa-times"></i></span>
<span class="badge badge-secondary">Morocco <i class="fa fa-times"></i></span>
<div class="row">
<div class="col-lg-8">
<br>
<div class="search">
<span class="fa fa-map-marker"></span>
<input type="text" placeholder="e.g Iceland" class="form-control">
</div>
</div>
<div class="col-lg-4">
<br>
<button type="button" class="btn btn-orange">
<i class="fa fa-plus"></i>
Add Another
</button>
</div>
</div>
</div>
</div>
CSS
.badge-secondary{
border-radius: 0px;
font-size: 15px;
}
.form-control{
border-radius: 0px;
height: 50px
}
.btn-orange{
background-color: #d17841;
margin-top: 5px;
color: white;
}
.search { position: relative; }
.search input { text-indent: 30px;}
.search .fa-map-marker {
position: absolute;
top: 10px;
left: 20px;
font-size: 25px;
color: #8e8e8e;
}
You Can Edit or Preview Code Here On JsFiddle
i use swiper slider to make a profile slide the javascript is standar like in this github
https://github.com/nolimits4web/Swiper/blob/master/demos/390-autoheight.html
this the picture from my page
i use like this for the header photo
<div class="row">
<div class="col-12 p-0">
<img class="kol1">
</div>
</div>
and this is for the text-box
<!--text-->
<div class="col-12 bg-text-kol">
<div class="swiper-container swiper2" >
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="text-left">
</br>
<h2 class="h5 mt-3"><?php echo $this->lang->line('kol_15_name'); ?></h2>
<?php echo '#'.$this->lang->line('kol_15_ig'); ?>
<p class="mark-bold"><?php echo $this->lang->line('kol_15_title'); ?></p>
<p class="mt-3"><?php echo $this->lang->line('kol_15_text'); ?></p>
</br>
</div>
</div>
</div>
<!-- Add Pagination-->
<div class="swiper-pagination"></div>
</div>
</div>
The slider text box is running well
my question is how do every time I do a slide photo header change every time I do a slide?
Here is a sample how you could integrate the image in your slider. The .text-left is positioned absolute inside the .testamonial container above all other content inside of it.
HTML Code:
<div class="swiper-slide">
<div class="testamonial">
<div class="banner">
Get your free Engrave
</div>
<div class="photo">
<img src="https://upload.wikimedia.org/wikipedia/en/8/88/MagooAndDog.jpg"/></div>
<div class="text-left">
<h2 class="h5 mt-3">Mr. Triples</h2>
#mr_triples
<p class="mark-bold">Content User</p>
<p class="mt-3">Not that much here.</p>
</div>
</div>
</div>
CSS Code:
.photo {
width: 300px;
height: 300px;
max-width: 300px;
overflow: hidden;
}
.banner {
background-color: orange;
padding: 5px;
}
.text-left {
text-align: left;
position: absolute;
width: 200px;
border-radius: 10px 10px 0px 0px;
background-color: rgba(255,255,255,0.8);
bottom: 0;
left: 30px;
padding: 10px;
padding-top: 20px;
min-height: 100px;
}
Here is a codepen to show you how your desired effect can be achieved.