Background-Color is not working with RazorPDF (Mvc view to pdf) - razorpdf

I am using RazorPDF to convert Mvc view to PDF. everything is working fine... except Background-Color for Div / table tag.
Any suggestion?

Try this
<table backgroundcolor="red">
<tr></tr>
</table>

Related

An image as a button for a link will be placed after the text in a PDF and not in between

On my site I have images in the travel report, some of which you can click on and are therefore between the a tag of a link. This works well on the site. But if a PDF is made of it, the images with links will be placed behind the text.
We received the code, Robin immediately walked over to it and came back with the house key.<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left"> After dinner to the apartment.
On the website: example HTML/PHP - result in html (pic)
On PDF via dompdf: example PDF - result in pdf (pic)
Does anyone know how this can be solved so that the image also appears between the text and not after the text?
Maybe you can set a z-index value for your image's CSS like this:
img {
z-index: 1;
position: relative;
}
Or try putting the
<img src="/images/pngegg64.png" alt="Receipt” title="click to view the bill" border="0" align="left">
in a block-level element. Wrap a <div></div> around it.
Hope it helps!

Is it possible to put Images in table's **td** tag in mpdf Laravel library

I am trying to add an 100 X 100 pixel image in a table in mpdf. But the table disappears when I do so.
<table>
<tr>
<td><img src="https://someimage.jpg" width=100 height=100></td>
</tr>
</table>
But when I use tag outside table it fetches the image and shows it perfectly fine.
How do I put image in table in mpdf (is there any trick)?
From my experience when I tried to use MPDF with tables and images inside cells I couldn't manage to set the correct image sizes. I fixed it with div's instead of table. If possible try this solution
It is possible to put images in a table in mpdf. Earlier i was making syntax mistake. I had forgot a comma. Sorry for inconvineance.
<table>
<tr>
<td><img src="https://someimage.jpg" style="height:50px; width:100px;"></td>
</tr>
</table>

Outlook responsive Image in table not working / outside table is working

I'm working in a responsive newsletter and I'm nearly finished. In the last two weeks I read about the issues and things to mess when coding a responsive newsletter.
My newsletter is ready to use and responsive but now I face some problem that I cant solve since two days.
I got an image that is responsive in Outlook:
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
and a table that is also responsive in Outlook:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
MASS-TEXT
</td>
</tr>
</table>
so far so good - it works great. BUT if I put the image in the table it isn't responsive anymore:
<table width="800" style="width:800px;max-width:96%;text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<tr>
<td style="text-align:justify;font-family:arial;color:black;font-size:14px;line-height:1.2em;">
<img src="#" style="width:230px;max-width:96%;border:0px;" width="230">
</td>
</tr>
Anybody know a solution for this or know why it isn't working because it works as single elements?
I tried a few things like give the rows and columns a percentage width and so on... nothing working. I just want a responsive table with a responsive image inside working for outlook... someone experience with this?
Dont you think that the max-width should be static and width should be relative i.e. max-width:800px and width:96%;
The below code works well in the standard outlook version. Outlook responsive Image in table working.
<table width="600" >
<tr><td>
<img src="add image link"/>
</tr></td>
</table>

spring java - reuse tiles

i have a j2ee written with spring framework and we are using tiles for templating.
overtime, developers have created numerous css styles and reuse them all over the jsp pages. for example we created a <table class="tablestyle blue ">, or <select class="style1 style2 style3"> and it is used in multiple pages. the problem i faced is that whenever we create a new table/select, we have to ensure we key in the correct css styles and this is cumbersome.
my question is, is it possible to put this <table> and <select> with its css class styles into a template and reuse it in other templates?
you can have this kind of tile for example it is the table
<table>
<thead>
<tr>
<c:foreach items="${tableColumn}" var="column">
<td><c:out value="${column}"/>
</c:foreach>
</tr>
</thead>
</table>
from the controller you will just put an column attribute to make it more flexible
and the select is all the same right?
<select>
<c:foreach items="${optionItems}" var="option">
<option><c:out value="${option}"/></option>
</c:foreach>
</select>
in this case you could reuse the table and option tile in every jsp you want it.

Using Razor "RenderPartial" and "RenderBody", the body is rendered on top

I am developing a site with Header, Main Menu, Body and Footer sections.
I am using a web page base layout _Layout.cshtml where I use the RenderPartial() method to render the Header, Main Menu and Footer. For the body, I am using the RenderBody() method.
In _Layout.cshtml I have the following code:
<body style="margin: 0">
<form name="FormStart" method="post" action="Start.aspx" id="FormStart">
<table cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td valign="top" width="1px"></td>
<td valign="top" align="center" width="972" bgcolor="#FFFFFF">
<table id="Table1" cellspacing="0" cellpadding="0" width="972" border="0" bordercolor="yellow">
<!-- HEADER -->
#{Html.RenderPartial("_Header");}
<!-- MAIN MENU -->
#{Html.RenderPartial("_Menu");}
<!-- CONTENT -->
#RenderBody()
</table>
<br />
<!-- FOOTER -->
#{Html.RenderPartial("_Footer");}
</td>
</tr>
</table>
</form>
</body>
On the other hand, I created a very simple view with the following code
#{
ViewBag.Title = "Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>You just clicked </h3><h1>NATURAL ALOE SECTION</h1>
The thing is, that the content of this simple view is displayed at the very top of the page, whereas the rest is on the bottom. Instead of displaying HEADER-MAINMENU-my site-FOOTER it displays it in the order of my site-HEADER-MAINMENU-FOOTER.
I am quite new with MVC all around; I have been reading here about the possibility of using RenderSection instead of RenderPartial in my main Layout site, but could this be the reason while it is displaying this way? Probably I am way off base, any advice is much appreciated.
Thanks in advance.
This might be happening because you render the header, menu and body inside a <table>. At least the body seems to be missing the row and cell tags (<tr><td>...</td></tr>). Therefore there are no rows and cells in your table which can lead to all sorts of rendering problems.
It would probably help if you didn't render into a table and use CSS for layout purposes instead.
This looks to be nothing to do with the MVC side of what you are doing - that looks perfectly fine.
The issue will be with your HTML. I would suggest having a look at the site using one of the browser developer tools (e.g. in Chrome or IE open your site and press F12) - you can use the features of these to examine how the visual elements on your page relate to the HTML. These tools are invaluable as an MVC programmer.
Using tables to control the layout of a web-page is discouraged in favour of using css for layout. You can find some basic css layout templates via Google to get started.

Resources