Skip to content

First item on a new page uses fillColor from the table in header #2872

@sj-1010

Description

@sj-1010

Issue Description:
So I am using html-to-pdfmake lib to generate pdfmake content from some html. And my document has a header that contains a table with a fillColor for its cells. When a page break happens, the first node that's on the new page, if it has "color": "inherit" set on it - will print the text the same color as the fillColor in the header table.

This is a super edge case but I cannot figure out why the color in the header is affecting the actual content on the page. And moreover only the first node. The second node prints fine.

Playground Example:

var dd = {
    "content": [
        {
            text: "SPACER",
            fontSize: 50,
            margin: [0, 330]
        },
        [{
            "nodeName": "UL",
            "ul": [{
                "nodeName": "LI",
                "stack": [{
                    "text": [{
                        "text": "item number 1",
                        "nodeName": "SPAN",
                        "alignment": "left",
                        "color": "inherit",
                        "fontSize": 10,
                        "style": ["html-span", "html-p", "html-li", "html-ul"]
                    }],
                    "nodeName": "P",
                    "margin": [0, 5, 0, 10],
                    "alignment": "left",
                    "style": ["html-p", "html-li", "html-ul"]
                }]
            },
                {
                    "nodeName": "LI",
                    "stack": [{
                        "text": [{
                            "text": "item number 2",
                            "nodeName": "SPAN",
                            "alignment": "left",
                            "color": "inherit",
                            "fontSize": 10,
                            "style": ["html-span", "html-p", "html-li", "html-ul"]
                        }],
                        "nodeName": "P",
                        "margin": [0, 5, 0, 10],
                        "alignment": "left",
                        "style": ["html-p", "html-li", "html-ul"]
                    }]
                },
                {
                    "nodeName": "LI",
                    "stack": [{
                        "text": [{
                            "text": "item number 3",
                            "nodeName": "SPAN",
                            "alignment": "left",
                            "color": "inherit",
                            "fontSize": 10,
                            "style": ["html-span", "html-p", "html-li", "html-ul"]
                        }],
                        "nodeName": "P",
                        "margin": [0, 5, 0, 10],
                        "alignment": "left",
                        "style": ["html-p", "html-li", "html-ul"]
                    }]
                }
            ],
            "marginBottom": 5,
            "marginLeft": 5,
            "style": ["html-ul"]
        }],
    ],
    "header": {
        "stack": [{
            "table": {
                "body": [
                    [{
                        "text": "My header Text",
                        "fillColor": "#bb4",
                        "bold": true,
                        "margin": [10, 3]
                    }, ]
                ]
            }
        }],
        "margin": [40, 10]
    },

}

Screenshot:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions