I am working on mpdf and it is a good library to convert html page to pdf, but when I put block element e.g <div><p> inside table cell it doesn't behave like a block element, it behaves like inline element.
code:
<td><div>Block Element</div></td>
or
<td><p>Block Element</p></td>
Is there a way to make it block element?
Or should I use other library?
Thanks in advance.
Looking for solutions to the same problem I just realized that according to the documentation, it's not a bug, it's a feature limitation:
Block-level tags (DIV, P etc) are ignored inside tables, including any
CSS styles - inline CSS or stylesheet classes, id etc. To set text
characteristics within a table/cell, either define the CSS for the
table/cell, or use in-line tags e.g. <SPAN style=”…“>
Seems like there's currently no way around it.
In my case I had to use s to indent (fake-center) a <h4> headline.
See https://mpdf.github.io/tables/tables.html
Related
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'Flat-UI-Icons';
content: attr(data-icon);
speak: none;
I saw this code in one of the bootstrap theme template. How does data-icon or attr(data-icon) works? i cant seem to display the "image/words" of the example i had, it's empty now. I tried
text here
The text here's font doesnt seem to be the same as the example's one and also , the example didnt have anything between the a tags.
Please advice. Thank you
The css above will affect what happens before each instance of data-icon and not the link shown
They are a css3 feature. Attribute selectors alow you to to apply formatting to elements based on certain attributes.
[att^=val] – the “begins with” selector
[att$=val] – the “ends with” selector
[att*=val] – the “contains” selector
good description here which is where above taken from and here
Using PHP, I need to read in a csv file of id's...
0123,0456,0789
... then load a SVG XML graphics file and change the color attribute of those specific id's.
Each polygon in the SVG file has records like below. I need to change the fill: values in every matching record from #d0d0d0 to #FF0000. Outer loop will be the ids of course, inner will be each record of the SVG file.
style="font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel"
d="M 131.85275,310.64335 L 131.85275,311.08435"
id="0123"
For my hobbyist level of programming skill, a general PHP structure of the loops needed plus tips how to access specific attributes of style would be very helpful!
Thanks!
Brian
The DOMDocument object has getelementbyid, getAttribute and setAttribute, which should let you change the xml.
This example looks similar to what you're wanting, once you get the styles you can explode with ';' to get the array of styles, then join with the new styles.
I'd recommend a different approach: Use CSS for changing the color. No looping over SVG elements required there. To be able to do this, you should clean up the SVG file a little, which also will make it more compact.
As I understand it, all your to-be-colored elements have the same style attribute with content
font-size:12px;fill:#d0d0d0;fill-rule:nonzero;stroke:#000000;stroke-opacity:1;stroke-width:0.1;stroke-miterlimit:4;stroke-dasharray:none;stroke-linecap:butt;marker-start:none;stroke-linejoin:bevel
Delete those attributes, replace them with a sensible class attribute. Let's say those paths are countries on a map, then lets give them an attribute class="country". Then style all of those using one CSS rule, like:
.country {
fill: #d0d0d0;
fill-rule:nonzero;
stroke:#000000;
stroke-opacity:1;
stroke-width:0.1;
stroke-miterlimit:4;
stroke-dasharray:none;
stroke-linecap:butt;
marker-start:none;
stroke-linejoin:bevel;
}
I left away the font-size property as this is irrelevant for a <path> element. (Probably you can simplify this further because a lot of properties repeat the default values, and unless you change those properties in a parent element of your paths, fill-rule, stroke-opacity, stroke-miterlimit, stroke-dasharray, stroke-linecap and marker-start are redundant, but don't hurt anyone.)
There is one more problem: If the IDs in your file look indeed like 0123, 0456 or 0789, those are invalid because they need to follow the rules for XML names, which must not start with a number. You should expect problems when trying to style those elements using their IDs or when trying to use getElementById() on them. So, you might want to change them to something like id0123, id0456 and id0789
Now, you can dynamically add some CSS from your CSV data.
0123,0456,0789
would become
#id0123,#id0456,#id0789 {fill:#FF0000}
and you're done. The CSS can be added to a <style> element of your SVG file, or you create a separate CSS file and reference this from the SVG. This way, you don't have to do any changes to the SVG when dynamically changing the colors. If you use the SVG data inline in HTML, you can also add this to a <style> element in your HTML page or a CSS file that's referenced by the HTML.
I would like to put a footnote in my PDF, created by MPDF from html. I didn't find any function or tag for that. I tried put notes in footer, changing it by tag, but that was changing footers for all even/odd pages. Maybe is there a way to change footer starting from next page? Then I would change footer with my note text and immediately after change it to standard footer.
$mpdf->SetFooter('{DATE d/m/Y }|{PAGENO}/{nb}|Sym Consultoria');
I mean, using css sprites on non static content like: Inside while(mysql_fetch_array())...
You can use a CSS sprite anywhere you are writing HTML code... As far as "inside while..."... i have no idea what you mean by that. If your while loop prints HTML, then yes, you can use a sprite.
your code looks like PHP. That is processed on the server to generate static HTML content. It is not executed dynamically in the browser like JavaScript. You can have have the element classes and id attributes echoed out to whatever content your'e generating in PHP and then reference those from your CSS.
On my Drupal site, I have made a Users page using the Views module, which is simply a nicely styled grid (HTML table) of users. I'm displaying a few fields for each one, and both the name and the profile picture have been set to link to the user node.
What is the best way to change it so that the whole cell (HTML td) links to the user node? EDIT: I'm not concerned with adding the HTML link tags, but with accessing each profile page's URL.
I've looked into modifying the theme of the view (over-riding the Style output e.g. views-view-grid--users.tpl.php), but cant see an elegant way to get the URL of the user node.
EDIT: I've implemented a temporary solution in javascript which looks into the HTML of each cell, extracts the first link's URL, and uses that, but is there not a better way of doing this using the Drupal variables somehow?
Thanks for your help.
How about something like this...no JavaScript needed
In your table:
<td>the link</td>
...
In your CSS file:
.td_link {
display: block;
width: 100%;
}
So basically all you need to do is add a class to your link, and a small snippet of CSS.
OK I found a better (super simple) way of extracting the profile URL, and also I over-came a few issues with the whole block-link solution (attributed to espais), which I thought were worth documenting. So here is the complete solution to my original problem:
1) Add a custom template file to override views-view-fields.tpl.php (see http://views-help.doc.logrus.com/help/views/using-theme - thanks to barraponto for the useful link). In this custom file, you should wrap all the code in a link, and add a clear-fix div just before the end to stretch the link to the full height of the container.
<a class="td-link" href="user/<?php print $row->uid; ?>">
...
<div class="clear-fix"></div>
</a>
2) Now you need to get rid of any other links from inside each grid element, as you are not allowed to nest HTML links (produces really weird behaviour). First thing to do is edit the View, and make sure none of the fields have "link this field to it's user" checked. Then if you want to include the profile picture field, you need to add a small fix module because by default there's no way to stop this field being a link! You can get the module from this comment: http://drupal.org/node/720772#comment-2757536
3) Finally the CSS. Add the following to your theme's style.css:
a.td-link {
display: block;
color: #000;
text-decoration: none;
border: 1px solid #E9EFF3;
}
a.td-link:HOVER {border-color: #85b3d4;}
a.td-link label {cursor: pointer;}
div.clear-fix {clear: both;}
This removes the link formatting from the text (as we want the whole block to look like a link, not just the text), and stretches the link out to fill the container. It also makes the cursor graphic consistent, and adds a nice border effect when you mouse-over the block. Remember you can also add a custom CSS class to your View, which makes it much easier/neater to select elements for styling in your CSS code.
It's important to distinguish between actual links, with <a> tags, and arbitrary elements you can click. Even if you don't care about semantics, you should care about your visitors not running JavaScript, especially search engines.
Rather than turning a block element into a link, you should turn a link into a block element, as espais suggested. One way to get more control over the markup is using custom fields to add opening and closing tags for your link around the rest of your fields.
spais and scott-reynen are right. but instead of placing every field under multiple <a> elements, each styled with css to turn them into blocks (which can have margin and padding), why not use a single <a> element?
if everything is meant to link to the same place, you can place it all together under a single <a> element, although every element should be an inline element (<span> instead of <div>). you can do it by changing the row template: check http://views-help.doc.logrus.com/help/views/using-theme
in your case, copy templates from inside the views module to your theme folder, and rename it accordingly as your view "Theme: Information" says. make sure there is no <div> or <p> or any other block element being output. if you need to break lines, use <br>.