Align contents to right in MvcRazorToPdf library

Question

I have below view which generates PDF invoice using MvcRazorToPdf library

<table border="0">
    <tr>
        <td>
            <h1>Company Name </h1>
        </td>
        <td>
            <div style="text-align:right;margin-right:0px;">
                Invoice
            </div>
        </td>
    </tr>
</table>
<hr/>
<div>
    @Model.InvoiceNum
</div>

Above code generates below view in pdf

But how much ever I style the above div within td for invoice, I am not able to move the Invoice text to the right side of the pdf. I've tried adding link to bootstrap.css which doesn't work either. Anyone have any solution for this? Has anyone worked on styling the pdf with MvcRazorToPdf librabry?

Give the `td` elements a width (or the table `width: 100%;`) — , Jul 06 '16 at 10:53
@StephenMuecke Come on man.. So simple was the answer.. :/ Thank you so much brother.. :) Please add it as answer and I shall accept it.. :) — Guruprasad J Rao, Jul 06 '16 at 11:00
Is there any reason your using a `` for non-tabular data? (or do floats, absolute positioning etc not work with `MvcRazorToPdf`) — , Jul 06 '16 at 11:03
No there isn't @StephenMuecke.. Was just trying my luck with all forms of elements possible and ended up with ``.. Is it not a good option to have `
` here? — Guruprasad J Rao, Jul 06 '16 at 11:04
[Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) and [Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS](http://phrogz.net/css/WhyTablesAreBadForLayout.html). No time just now, but I'll add an answer later with a few suggest alternatives — , Jul 06 '16 at 11:07

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Your text alignment is being respected, its just that by default, you table and its cells will be collapsed to fit the content (easy to check by using your browser tools to inspect the elements).

Give your table (or its cells a width), for example

<table style="width:100%;">

However, using <table> elements is not good practice (refer Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS.). Instead you can use floats or relative/absolute positioning, for example

<div style="position:relative;">
    <h1>Company Name</h1>
    <span style="position:absolute;right:0;bottom:0">Invoice</span>
</div>

or

<div>
    <h1 style="display:inline-block">Company Name</h1>
    <div style="float:right;margin-top:40px;">Invoice</div>
</div>

edited May 23 '17 at 12:16

Community

1
1

answered Jul 06 '16 at 11:38

Thank you bro, but there is slight difference between **[Table option](https://s32.postimg.org/v3uh487t1/Table.png)** you suggested and above 2 using `divs`. The **[Second option](https://s31.postimg.org/gzigsdg7v/Second_Option.png)** is quite better compared to **[First Option](https://s31.postimg.org/yxkloxj4r/First_Option.png)**. But it would have been good if I get to go with Table option type design.. :) Also, any ideas how we can integrate bootstrap `CSS` with this? If and only if you can help on this.. :) – Guruprasad J Rao Jul 06 '16 at 17:25
Not sure how your getting the layouts in the images you have shown. You must have other css affecting your elements. See [this fiddle](https://jsfiddle.net/4agy4v9t/) for examples of both alternatives I suggested. You will need to use your browser tools to inspect the styles being generated for each element – Jul 07 '16 at 00:21
Oops Sorry if am not clear.. I am working on `PDF`s and basically, the library I mentioned converts `razor view` to `PDF` and hence, I cannot inspect this on browser. There is a separate view with separate layout for the `PDF` and no extra `CSS` added.. – Guruprasad J Rao Jul 07 '16 at 03:30
Yes, but you should be able to inspect it from the view that your rendering (before its converted to the pdf). Are you saying its correct in the view, but not in the pdf? – Jul 07 '16 at 03:34
Yes buddy.. Because, whatever `margin` effects I try setting in view, its not reflecting in `PDF`.. Only few `CSS` properties are working as expected.. Not sure what's causing the problem.. – Guruprasad J Rao Jul 07 '16 at 03:41
1

Ahh, I have just found [this CSS conformance list](http://demo.itextsupport.com/xmlworker/itextdoc/CSS-conformance-list.htm) which indicates floats and positioning are not supported, so I guess you are stuck with using a table – Jul 07 '16 at 03:44
Oops.. My bad.. I was trying `jsreport`, which was good enough again to convert `razor` to `pdf` but then was facing some issues with `LongPathException` and then I tried with `iTextSharp` library, which provided flexibility for styling but increased number of lines of code.. then I went choosing this library, which was quite good but now this problem.. As you said I am stuck with using `table` now.. :( – Guruprasad J Rao Jul 07 '16 at 03:55

Align contents to right in MvcRazorToPdf library

1 Answers1