Red Border and Image Overlay

[SmartValve-Jordan]

Hey!

I've just started using QuestPDF and I feel as though I might have a debug setting enabled somewhere that I can't find.

When I generate a PDF I get a red border where I assume it's showing padding and margins but I can't find what's causing it, can anyone provide some insight?

public static class ResponsesPDFGenerator
{
    public static byte[] Generate(IPDFService pdfService, string webrootPath, IEnumerable<ResponseDisplayPageDTO> responses)
    {
        return pdfService.Generate(x => Compose(x, webrootPath, responses));
    }

    private static void Compose(IDocumentContainer container, string webrootPath, IEnumerable<ResponseDisplayPageDTO> responses)
    {
        container
            .Page(page =>
            {
                page.DefaultTextStyle(x => x.FontSize(12));

                page.MarginVertical(40);
                page.MarginHorizontal(50);

                page.Size(PageSizes.A4);

                page.Header().Element(x => ComposeHeader(x, webrootPath));
                page.Content().Element(x => ComposeContent(x, webrootPath, responses));
                page.Footer().Element(x => ComposeFooter(x, webrootPath));
            });
    }

    private static void ComposeHeader(IContainer container, string webrootPath)
    {
        container.Column(column =>
        {
            column.Item().Row(row =>
            {
                row.Spacing(50);

                row.ConstantItem(90).Hyperlink("https://website.co.uk").MaxHeight(30).Image(GetPNGStreamFromSVG($"{webrootPath}\\images\\Logo-Colour-Text-White-Landscape.svg", 200, 100));
            });

            column.Item().ShowOnce().PaddingVertical(15).Border(1f).BorderColor(Colors.Grey.Lighten1).ExtendHorizontal();
        });
    }

    private static void ComposeContent(IContainer container, string webrootPath, IEnumerable<JobTaskResponseDisplayPageDTO> responses)
    {
        container.PaddingVertical(20).Column(column =>
        {
            column.Spacing(20);

            foreach (var response in responses)
            {
                column.Item().Section(response.Name);

                foreach (var dto in response.Responses)
                {
                    column.Item().Text(dto.StringContent);
                    column.Item().Text(dto.Value);
                }

                column.Item().PageBreak();
            }
        });
    }

    private static void ComposeFooter(IContainer container, string webrootPath)
    {
        container.AlignCenter().Text(text =>
        {
            text.CurrentPageNumber();
            text.Span(" / ");
            text.TotalPages();
        });
    }

    private static Stream GetPNGStreamFromSVG(string filename, int width, int height)
    {
        return SvgToPng.Convert(filename, null, width, height);
    }

[MarcinZiabek]

This visualization shows an invalid layout constraint related to your logo 😄

The logo has an aspect ratio of 200:100, so when set with MaxWidth equal to 90 points (from ConstantItem), it wants to use 45 points of horizontal space but has only 30 points (from MaxHeight). This is because the default scaling strategy is FitWidth.

You can either remove MaxHeight or change the Image scaling strategy to FitArea (https://www.questpdf.com/api-reference/image.html#image-scaling)

[SmartValve-Jordan]

That's worked, thank you!

I thought it might be something like that but couldn't find the documentation on it 😅