Styling pdfHtml5 messageTop for a function return variable.

bchipre

Hello @allan @kthorngren
I have tried to style my pdfHtml5 messageTop which is using a function return. Tried all the option without any success. Below is the code I tried :
messageTop: { text: 'ESM | List of <?php echo $emp_name; ?>' + '\n' + $("div.toolbar").text(), fontSize: 10, fontFamily: 'Poppins sans-serif', bold: true, italics: false, alignment: 'center' }
and
messageTop: function(){ return 'ESM | List of <?php echo $emp_name; ?>' + '\n'+ $("div.toolbar").text(); }, customize: function(doc) { doc.styles.messageTop = { color: 'red', fontSize: '10', fontFamily: 'Poppins sans-serif', background: 'blue', alignment: 'center' }
and also tried to use a plan CSS
#example .datatables .messageTop { font-size: 10px; text-align: center; font-family: 'Poppins sans-serif'; }

Is there any way this can be achieved. Want to make the messageTop loo like

colin

This example here may help, it shows the different combination. Also this thread which discusses alignment,

Colin

bchipre

@colin
Tried with the thread, but no success. Still jumbling to style the Title and messageTop.
Here is the test case : http://live.datatables.net/rabuhode/1/edit

colin

I'm sorry, my first link was omitted above - it should have been this example.

This SO thread talks about changing fonts. I suspect you'll need to dig into the PDFMake docs more to get to the bottom of it,

Colin

bchipre

@colin Nothing worked out. No info in PDFMake Docs too. Still struggling !

allan

This is how we add the message top to the PDF:

            doc.content.unshift( {
                text: info.messageTop,
                style: 'message',
                margin: [ 0, 0, 0, 12 ]
            } );

So unfortunately you can't style it directly using messageTop.

Two options:

1. We'd take a pull request that would check to see if messageTop is an object (which could include styling information). If so then put that on the doc.content array, or
2. Use the customize callback to modify the styling as needed.

Allan

bchipre

@allan @colin
Fixed this alignment and styling for messageTop as suggested by @allan.
Here is the updated example : http://live.datatables.net/gubugaja/1/edit