mPDF: Hide table row (CSS display:none) not work.
Do you have any suggest?
My code:
<table align="center">
<tr style="display:none">
<td valign="top" align="left">InfoOption1:</td>
<td valign="top" align="left" colspan="2">#InfoOption1</td>
</tr>
</table>
I feel very dirty for posting this suggestion, but it's the best I got working:
<tr><td>...</td></tr>
<div style="display: none;">
<tr><td>...</td></tr>
</div>
The DIV is the working part. Luckily, html validnes for seo isnt relevant for mPDF
It works if you enclose the row you want to hide inside a Div. The div will have a class which have declared hidden property.
<div class='hide_this_row'>
<tr>
<td>...</td>
</tr>
</div>
<!-- CSS file will look like this -->
<style>
.hide_this_row{
display :none;
}
</style>
Related
I am using mpdf library to generate PDF from HTML.I came across the limitation of mpdf that we cannot use block level elements inside table.Is there any possible way to make mpdf work with following code?. I tried span instead of p but its not act like block level elements.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<p style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">Some text</p>
<p style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">Some text Some text Some text </p>
</td>
</tr>
</table>
The styles of Block level elements inside table,td won't reflect in PDF.I have fixed above issue with using another table by following.Hope it will help someone.
<table style="width:100%; table-layout:fixed">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;font-size:14px;font-family:Arial;padding-left:105px;">
Some text
</td>
</tr>
<tr>
<td style="text-align:left;font-weight:normal;font-size:14px;font-family:Arial;padding-left:125px;">
Some text Some text Some text
</td>
</tr>
</table>
</td>
</tr>
</table>
I have a problem - I am trying to include a background image using CSS for the layer, but it doesn't work...
The CSS file looks like this
header {
background-image: url("boisko.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
The main file looks like this
<?php
error_reporting(0);
echo "<style>";
include "styl.css";
echo "</style>";
echo "<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\">
<tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Naglowek/index.php";
echo"<td>
</tr>
<td width=\"100%\" colspan=\"2\">";
include_once"Jezyk/index.php";
echo"</td>
</tr>
</table>";
?>
The background image should show in the cell where "Naglowek.index.php" is included, but it doesn't... That file looks like this:
<?php echo "<head><br><h1>Cracow Sunday Football League</h1><br><br></head>";?>
I know I could have written that file in html, but I would prefer it staying in php if it doesn't really matter.
Why doesn't my background image show up?
You have header in the CSS, but head in the HTML
Well you kind of have the right idea. You can save your file as a .php and still write the HTML that is needed.
Change the pages to look like this.
Main Page:
`<?php
<html>
<head>
<!-- title for the document, scripts, styles, meta information,and more -->
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" colspan="2">
<?php include_once"Naglowek/index.php"?>
<td>
</tr>
<td width="100%" colspan="2">
<?php include_once"Jezyk/index.php"; ?>
</td>
</tr>
</table>
?>`
As for the CSS I don't see anything class or ID called header so nothing is going to be applied.
<div class="header"></div>
As for the "Naglowek.index.php" file, it can stay the same as it being a .php file you just don't need the tags. Just straight HTML will work.
`<head><br><h1>Cracow Sunday Football League</h1><br><br></head>`
You should get rid of the head tags because they are a container for all the head elements.
I hope this helps clear things up
I have 5-10 table in pdf in which I am showing all the records of that table and each have approx 1000-2000 records. I have try to use below code to make footer on each page but instead of that its showing after completion of table. My template looks like below
<page backtop="0" backbottom="30mm" footer="page" style="font-size: 9pt">
<table>
<Records>
</table>
<page_footer>
<table class="page_footer" style="width: 100%;">
<tr>
<td style="width: 80%; text-align:center">
<p style='font-size: 6pt;color:red;'>
...Content...
</p>
</td>
</tr>
</table>
</page_footer>
You can add custom header and footer by using mixture of tcPDF and wkhtml2pdf. Here is an example html2pdf/tcpdf/example . Here is another example html2fpdf/discussion/thread
How can I Override NyroModal Wrapper.
I dont want to override the css class, we need the ability TO ADD our divs instead of the native WRAPPER div.
On GitHub i found 2 functions: beforeShowCont and filledContent, but i dont know how to override the wrapper using these functions.
And I also found this article on code google, and this is exactly what i want to develop, but it doesnt say how.
<table class="ctools-modal-content">
<tr>
<td class="popups-tl popups-border"></td>
<td class="popups-t popups-border"></td>
<td class="popups-tr popups-border"></td>
</tr>
<tr>
<td class="popups-cl popups-border"></td>
<td class="popups-c">
<div class="popups-container">
<div class="popups-title">
<span id="modal-title" class="modal-title"></span>
<span class="popups-close"><a class="close" href="#">Close</a></span>
<div class="clear-block"></div>
</div>
<div id="modal-content" class="modal-content">HERE WOULD .wrapper OR #nyroModalContent GO</div>
<div class="popups-buttons"></div>
<div class="popups-footer"></div>
</div>
</td>
<td class="popups-cr popups-border"></td>
</tr>
<tr>
<td class="popups-bl popups-border"></td>
<td class="popups-b popups-border"></td>
<td class="popups-br popups-border"></td>
</tr>
</table>
I refer the nyroModal code from here
If you want to override the wrapper class of it, you can do it by following way.
select the main container of the nyroModal.
add the new style for its wrapper.
i.e.
div#nyroModalFull div.wrapper{ /* your own style*/ }
load your own stylesheet after the nyroModal style
I hope this will work for you
If I have these two tables:
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
How can I make it so that the two columns have the same width?
I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.
Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:
<div id="content">
<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
</div>
I would write some css like this:
#content table td { width: 80%; }
I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
You can use CSS to accomplish this. You will have to have the longer content wrap.
td{
width:80%;
}
Try
<table>
<tr>
<td style="width:200px">Small Length Content</td>
</tr>
</table>
<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>
or add a class to name to the td element and define the style somewhere else like an external file or in header style