i'm trying to export a data-table with mpdf and cannot get to work css-borders, i already tried a lot of things...
I also tried to apply borders for testing on a heading in this simple example:
<?php
require_once('vendor/autoload.php');
ob_start();
?>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#media(print)
{
h1
{
font-size: 16px;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1);
}
table
{
width: 100%;
font-size: 13px;
border: none;
}
td
{
border: 1px black solid;
box-shadow: inset 0px 0px 0px 1px rgba(0,0,0,1);
}
}
</style>
</head>
<body>
<h1>
Headline
</h1>
<table>
<tr>
<td>blabla</td>
<td>blabla</td>
<td>blabla</td>
</tr>
</table>
</body>
</html>
<?php
$content = ob_get_clean();
$mpdf = new \Mpdf\Mpdf();
$mpdf->SetHTMLFooter('<div class="footer"><span class="pagenum">Seite: {PAGENO} / {nbpg}</span></div>');
$mpdf->WriteHTML($content);
$mpdf->Output();
I also tried to put the css into a external stylesheet or apply it inline, but no success..
(Latest mpdf version installed via Composer)
The strange thing tough is that the font-size and background-styles are being applied o.O
Is there anything i missed?
Update:
I've updated the code, tried to apply box-shadows too, they are applied to the h1, but not the td-elements.. also it seems not a really clean solution for tables...
Correct CSS border definition as per specificaton is <br-width> || <br-style> || <color>
Code works as expected in mPDF when the CSS definition is
td {
border: 1px solid black;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/border
So far as I am dropping some lines, there is still something wrong with MPDF when dealing with table borders.
When you style <td> and add border there, what you can see in the output is just border left and border right, and no border top and border down. For me, so as to bypass the problem, I styled both <tr> and <td> to get all the borders, that is the top, bottom, right, and left borders. I just shared my solution in case someone would find it useful.
table td, table th, table tr {
border: 1px solid #c9c9c9 !important
}
Related
I am using PHP to call data from a Microsoft SQL Database. That functionality is working, however when PHP updates the table's data it is overriding some of the formatting. One big specification I wanted was to have a max-height of 400px and once it crosses that the table becomes scroll-able.
Some context: I am running this on a local PHP server.
I have tried adding !important tags but that did not work.
<table id = 'tbl' class='table'>
<thead id = 'heading'>
<tr>
<td scope="col" >Applicant ▼</td>
<td scope="col">Grantee EIN</td>
<td scope="col">State</td>
<td scope="col">FAC Accepted Date</td>
<td scope="col">Expenditures</td>
<td scope="col">Prior Finding</td>
<td scope="col">Audit</td>
</tr>
</thead>
<div id = 'scrollbody'>
<tbody>
<?php
$result = array();
do {
while ($row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC)){
echo '
<tr>
<td>'.$row["AUDITEENAME"].'</td>
<td>'.$row["EIN"].'</td>
<td>'.$row["STATE"].'</td>
<td>'.$row["FACACCEPTEDDATE"].'</td>
<td>'.$row["TOTFEDEXPEND"].'</td>
<td>'.$row["PYSCHEDULE"].'</td>
<td><input type="checkbox" oninput=""></td>
</tr>
';
}
} while (sqlsrv_next_result($stmt));
// sqlsrv_free_stmt($stmt);
// sqlsrv_close($conn); //Close the connnectiokn first
// echo json_encode($result); //You will get the encoded array variable
?>
</tbody>
</div>
</table>
#tbl {
margin: auto;
top: 0px;
height: 100%;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
}
What I want to see is a table of 400px height, but instead a table of much longer height is being displayed.
So, there are 2 options:
Wrap the table in with a wrapper and give the max-height to that element.
<div id="table-wrapper">
<table>
{Your stuff...}
</table>
</div>
Give the thead, tbody a display: block property. With which again your CSS styles will come into use.
First you need to know how a browser works.
The browser will not show anything until this steps are made:
Your browser request a file like html or php first.
Then it will check the styling (CSS/SCSS).
Checking for JavaScript.
checking for source like an image or other media.
Only then it will display the page.
So if you want to style after this process, you will need JavaScript.
JavaScript is invented to manipulate or modify the DOM (document object Model).
That means, you can point to an element and style it, remove it, add a new element etc.
For a better format I prefer jQuery.
jQuery is another way to code JavaScript. (jQuery = JavaScript, just in another form) jQuery calls the JS library.
you can't set header of a table, a table height is based on his content, if you need a table with a specific height you need to change the display type and add overflow rule:
#tbl {
margin: auto;
top: 0px;
height: 100px;
max-height: 400px;
position: relative;
font-family: 'Segoe UI';
box-shadow: 0px 0px 5px 2px rgb(240, 240, 240);
perspective: 1px;
border-radius: 0px 0px 20px 20px;
white-space: nowrap;
width: 100%;
z-index: 1;
display:block;
overflow:auto;
}
Here a live fiddle https://jsfiddle.net/g7fuLhyp/
I want to add CSS that is dependent on some PHP variables in the code that is generated before a WP_Query loop. Basically I want to use uniqid and apply the ID to some elements and then add some media query rules for these elements, possibly as <style> tags. I've tried the following, but I'm not sure if style tags that are put in the <body> are ignored or not since this is not working.
$id = uniqid();
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
The tag is placed in the DOM, but it's ignored. So I'm either looking for a way to put CSS that is generated in the template, in the <head>. Or any other method for adding CSS other than inline on the element itself, since I can't use media queries that way. Just to be clear, the code above is put inside a loop, as I need the meta values from the post in order to generate the CSS.
Or is this just stupid?
Placing <style> tags within the <body> of your document is technically invalid, but in practice will work almost everywhere.
The problem I suspect you're running into is: the return value of uniqid() may begin with a number, and CSS identifiers cannot begin with numbers. So, if you generate an ID like "4b3403665fea6", your CSS might look okay, but it will be ignored.
You can fix this by passing a prefix to your call to uniqid(), like so:
$id = uniqid('id-');
...so that $id will be a value like "id-4b3403665fea6".
Sample demonstrating in-body <style>
<head>
<style>
#id-4b3403665fea6 {
background: blue;
}
</style>
</head>
<body>
<h1>Test</h1>
<div id='id-4b3403665fea6'>Style me!</div>
<style>
#id-4b3403665fea6 {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
</body>
Note that the <div> winds up with a red background, not blue like the <head> style specifies.
Hope this will help you.
<?php
$id = uniqid('cnt-');
?>
<style>
#<?php echo $id; ?> {
background: red!important;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
}
</style>
<div id="<?php echo $id; ?>">Test Content</div>
I have a style set out for a div class, for some html that is loaded from this text file.
content.txt
<div class="container">
<main class="content">
<strong>Paragraph Title</strong> <br>
Lots of text that actually goes here.
</main><!-- .content -->
</div><!-- .container-->
In fact, the text between the <strong> tags doesn't look any different that the rest of that text.
CSS
<style type="text/css">
#auto-slideshow {
position:relative;
z-index:1;
overflow:hidden;
margin:0 auto;
height:300px;
border:2px solid #333333;
box-shadow:0 0 5px 0 #000;
-webkit-box-shadow:0 0 5px 0 #666;
}
#auto-slideshow img {
height: 100%;
width: 25%;
position:absolute;
margin-left: 32.5%;
z-index:1;
opacity:0;
-webkit-transition:opacity .8s linear;
}
#auto-slideshow img.show {
opacity:1;
}
.content {
border-right: solid 1px #999999;
}
</style>
HTML
<div class="middle">
<?php
echo file_get_contents( "modules/content.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/leftSidebar.txt" ); // get the contents, and echo it out.
?>
<?php
echo file_get_contents( "modules/rightSidebar.txt" ); // get the contents, and echo it out.
?>
</div><!-- .middle-->
And here is what shows up when I inspect the element
Update
I increased the size of the border to crazy amounts (100px) and found that the text is wrapping around what should be the border, but it's still not showing the border.
Check your stylesheet. In the inspect element panel, it shows that the padding property is defined two different times, one in line 113, and the second one in 162. Remember that css uses the last definition, so you should:
Specify your rules after line 162
Remove the rules in line 162
Use the !important tag in the first definition so it uses that one instead
Any of these should work
Im using php to display data from mysql. Here are my css statements:
<style type=”text/css”>
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
They are used for displaying table, tableheader, tabledate.
Im new to php css, so im just wondering how to use the above css style in php displaying codes:
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
<?>
I guess you have your css code in a database & you want to render a php file as a CSS. If that is the case...
In your html page:
<html>
<head>
<!- head elements (Meta, title, etc) -->
<!-- Link your php/css file -->
<link rel="stylesheet" href="style.php" media="screen">
<head>
Then, within style.php file:
<?php
/*** set the content type header ***/
/*** Without this header, it wont work ***/
header("Content-type: text/css");
$font_family = 'Arial, Helvetica, sans-serif';
$font_size = '0.7em';
$border = '1px solid';
?>
table {
margin: 8px;
}
th {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: <?=$border?> #000;
}
td {
font-family: <?=$font_family?>;
font-size: <?=$font_size?>;
border: <?=$border?> #DDD;
}
Have fun!
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.
more info : http://en.wikipedia.org/wiki/Cascading_Style_Sheets
CSS is not a programming language, and does not have the tools that come with a server side language like PHP. However, we can use Server-side languages to generate style sheets.
<html>
<head>
<title>...</title>
<style type="text/css">
table {
margin: 8px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
background: #666;
color: #FFF;
padding: 2px 6px;
border-collapse: separate;
border: 1px solid #000;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: .7em;
border: 1px solid #DDD;
}
</style>
</head>
<body>
<?php>
echo "<table>";
echo "<tr><th>ID</th><th>hashtag</th></tr>";
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
echo "</table>";
?>
</body>
</html>
Just put the CSS outside the PHP Tag. Here:
<html>
<head>
<title>Title</title>
<style type="text/css">
table {
margin: 8px;
}
</style>
</head>
<body>
<table>
<tr><th>ID</th><th>hashtag</th></tr>
<?php
while($row = mysql_fetch_row($result))
{
echo "<tr onmouseover=\"hilite(this)\" onmouseout=\"lowlite(this)\"><td>$row[0]</td> <td>$row[1]</td></tr>\n";
}
?>
</table>
</body>
</html>
Take note that the PHP tags are <?php and ?>.
Try putting your php into an html document:
Note: your file is not saved as index.html but it is saved as index.php or your php wont work!
//dont inline your style
<link rel="stylesheet" type="text/css" href="mystyle.css"> //<--this is the proper way!
//save a separate style sheet (i.e. cascading style sheet aka: css)
I didn't understood this Im new to php css but as you've defined your CSS at element level, already your styles are applied to your PHP code
Your PHP code is to be used with HTML like this
<!DOCTYPE html>
<html>
<head>
<style>
/* Styles Go Here */
</style>
</head>
<body>
<?php
echo 'Whatever';
?>
</body>
</html>
Also remember, you did not need to echo HTML using php, simply separate them out like this
<table>
<tr>
<td><?php echo 'Blah'; ?></td>
</tr>
</table>
Absolute easiest way (with your current code) is to add a require_once("path/to/file") statement to your php code.
<?php
require_once("../myCSSfile.css");
echo "<table>";
...
Also, as an aside: the opening <?php tag does not have a > on the end, and the closing ?> php tag does not start with <. Weird, but true.
You can also embed it in the php. E.g.
<?php
echo "<p style='color:blue; border:2px red solid;'>CSS Styling in php</p>";
?>
hope this help for anyone in the future.
I don't know this is correct format or not. but it can solved my problem with removing type="text/css" when insert css code in html/tpl file with php.
<style type="text/css"></style>
become
<style></style>
Example
css :hover kinda is like js onmouseover
row1 {
// your css
}
row1:hover {
color: red;
}
row1:hover #a, .b, .c:nth-child[3] {
border: 1px solid red;
}
not too sure how it works but css applies styles to echo'ed ids
I had this problem just now and I tried the require_once trick, but it would just echo the CSS above all my php code without actually applying the styles.
What I did to fix it, though, was wrap all my php in their own plain HTML templates. Just type out html in the first line of the document and pick the suggestion html:5 to get the HTML boilerplate, like you would when you're just starting a plain HTML doc. Then cut the closing body and html tags and paste them all the way down at the bottom, below the closing php tag to wrap your php code without actually changing anything. Finally, you can just put your plain old link to your stylesheet into the head of your HTML. Works just fine.
This is the easiest:
require_once("../myCSSfile.css");
as elbrant mentioned.
I had to add <style> at beginning of myCSSfile.css and </style> at the end (normally not needed in a CSS file).
The image below explains what I am trying to achieve.
I need to show a user's car picture with the name under it. Each image/name pair should be in a DIV so as a user adds more cars, they move to the next line or page. Ideally the DIVs should be centered, more as a matter of aesthetics.
Using DOMPDF, I am generating a PDF from an HTML layout.
Unfortunately, DOMPDF's support for float is bad, even in the new 0.6.2 beta. I wonder if this layout I am proposing could be done without float. DOMPDF also does not support unordered lists.
I have tried some solutions using tables, but this also isn't good since DOMPDF does not allow cells to spill over to the next page.
I am using PHP 5/ codeigniter, and DOMPDF 0.5.2 (stable).
Any suggestions on how to get this layout are greatly appreciated!
Here is the code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
img {width: 150px; height: 150px;}
h1 {font-size: 3em; text-align: center;}
h2 {text-transform: uppercase; width: 150px; text-align: center;}
div {margin: 10px; width: 150px;}
</style>
</head>
<h1>My Cars</h1>
<?php foreach ($cars as $row): ?>
<div>
<img src="<?php echo $row->cars_picture; ?>" />
<h2><?php echo $row->cars_name; ?></h2>
</div>
<?php endforeach; ?>
</html>
Thanks to #rkw and #manyxcxi for helping out.
At the end the only way of doing this without hacks was to use mpdf instead of DOMPDF.
I have the impression mpdf is a much better library, with better documentation. It has partial support for float, but it works very nicely and does exactly what I needed above.
If the boxes are all fixed width and you know the width of your PDF, then you can calculate the boxes per row and use a spacer div on the left of the bottom row to give you the offset you're looking for.
Without using float, you would have to use instead of : http://jsfiddle.net/AxZam/40/
relevant css:
body {
width:800px;
}
#content {
margin: 0px auto;
width: 600px;
text-align: center;
}
img {
width: 150px;
height: 150px;
}
h1 {
font-size: 3em;
}
.cars {
text-transform: uppercase;
width:150px;
display:block;
position:absolute;
top:0px; left:0px; }
span {
margin: 10px;
position: relative;
}
relevant html section:
<div id='content'>
<h1>My Cars</h1>
<span>
<img />
<span class='cars'>car</span>
</span>
...
</div>