Cannot renders nested list within divs correclty in itextsharp

Question

I use itextsharp & mvcrazortopdf to generate pdfs in azure websites. nested lists in div tags or table cell cannot be rendered correctly - they become one single line. here is a example:

<div>
    <ul>
        <li>
            test1
            <ul>
                <li>test1.1</li>
            </ul>
        </li>
        <li>test2</li>
    </ul>
</div>

http://demo.itextsupport.com/xmlworker/ in the demo page it is rendered as:

• test1 test1.1
• test2

Any help is appreciated!

Answer 1

With the help of a coworker, we managed to create a workaround for nested lists inside a table cell. It involves surrounding the list with <div> tags, and they will render correctly.

For instance, in the web application I'm developing, there are several Razor Views that we convert to PDF. As these views are completed with data from the database, we allow users to fill some fields in other forms with rich-text controls. As a result, we can encounter any kind of styles and combination of lists.

The mentioned reports are similar in structure, so we have many tables within tables. In the last level of tables, we have the "troublesome" cells, which are filled with the rich-text fields from the database. Inside each cell, we put the <div> tags like this:

<tr>
    <td class="border3 fontMedium">
        <div>
            @if (!String.IsNullOrEmpty(entity.Field))
            {
                <p class="fontSmall">@Html.Raw(entity.Field)</p>    
            }
            else
            {
                <p>&nbsp;</p>
            }
        </div>
    </td>
</tr>

Please note that the mentioned <div> does not need to have any CSS class associated. The other CSS classes you see in the code snippet belong to the styling of the reports; and they involve borders, paddings and so on.

Hope that helps.