Below is one example payload for repeating headers to start with since it covers multiple issues. I will be getting another sample payload together. In the HTML below, we are using the “em” tag to make the title italic, but when the PDF is generated, the title is neither bold nor italic. Also, there is a “span” tag, where in the PDF, the text within that tag is overlapping other text. Lastly, both “h4” tags are contained within a div that has inline padding-top style, and in the PDF, it is not being applied.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="//fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<style>
.toggle-buttons .toggle-buttons--list .toggle-button { padding: 0.4667rem 0.8667rem; }.header { color: rgb(20, 80, 158); }#allcontent { font-family: "Open Sans" !important; }.modalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.8); z-index: 99999; opacity: 0; transition: opacity 400ms ease-in; pointer-events: none; }.modalDialog:target { opacity: 1; pointer-events: auto; }.modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px; border-radius: 10px; background: -webkit-linear-gradient(top, rgb(255, 255, 255), rgb(153, 153, 153)); }.close { background: rgb(96, 96, 97); color: rgb(255, 255, 255); line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; border-radius: 12px; box-shadow: rgb(0, 0, 0) 1px 1px 3px; }.close:hover { background: rgb(0, 217, 255); }
</style>
<style>
label { margin-right: 10px; }.footer-container { position: absolute; width: 100%; bottom: 0px; margin-top: 10px; }.content-wrapper { padding-bottom: 120px; }.wrapper { min-height: 100%; position: relative; }.attr-search { margin-top: 10px; padding-bottom: 5px; }.no-margin { margin: 0px; }.bottom-marg { margin-bottom: 15px; }.top-marg { margin-top: 15px; }.glyphicon-style { font-size: 25px; padding-bottom: 10px; color: rgb(51, 122, 183); cursor: pointer; }.styled-modal-header { background-color: rgb(64, 136, 0); }.error-modal-header { background-color: rgb(227, 227, 227); }.styled-modal-title { color: rgb(255, 255, 255); }.jqx-input { padding: 0px 1px !important; }.jqx-calendar-title-navigation.jqx-icon-arrow-right, .jqx-calendar-title-navigation.jqx-icon-arrow-left { height: 24px; }.jqx-icon-arrow-left, .jqx-icon-arrow-left-hover, .jqx-icon-arrow-left-selected, .jqx-icon-arrow-right, .jqx-icon-arrow-right-hover, .jqx-icon-arrow-right-selected { background-position: center center; }.jqx-grid-column-filterbutton { display: block; }.jqx-grid .jqx-widget-header, .jqx-grid-column-header, .jqx-widget-header { box-sizing: content-box; text-size-adjust: none; -webkit-background-clip: padding-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); border-color: rgb(204, 204, 204); background: linear-gradient(rgb(240, 240, 240) 0px, rgb(227, 227, 227) 100%) repeat-x; }.jqx-grid-column-header { font-size: 12px; color: rgb(102, 102, 102) !important; }div[id^="filterrow"] div div.jqx-grid-cell { background: rgb(254, 232, 190) !important; }div[id^="filterrow"] div div.jqx-grid-cell input { background: rgb(254, 232, 190); border-color: rgb(255, 212, 132); color: rgb(153, 153, 153); }div[id^="filterrow"] div div.jqx-grid-cell input:focus { background: rgb(255, 255, 255); border-color: rgb(153, 153, 153); color: rgb(51, 51, 51); }.jqx-widget-content { font-family: "MS Reference Sans Serif"; font-size: 12px; color: rgb(51, 51, 51); }.jqx-grid-cell { border-top: 0px solid transparent; border-left: 0px solid transparent; margin-right: 1px; margin-bottom: 1px; background: rgb(255, 255, 255); white-space: nowrap; font-weight: normal; font-size: 11px; line-height: 18px; overflow: hidden; height: 100%; border-right: 1px solid rgb(235, 235, 235) !important; border-bottom: 1px solid rgb(201, 201, 201) !important; position: absolute !important; }div.jqx-grid-content > div > div[role="row"]:nth-child(2n+1) > div.jqx-grid-cell:not(.jqx-grid-empty-cell).jqx-fill-state-hover, div[role="gridcell"].jqx-fill-state-hover { background: rgb(231, 240, 251); }div.jqx-grid-content > div > div[role="row"]:nth-child(2n+1) > div.jqx-grid-cell:not(.jqx-grid-empty-cell).jqx-fill-state-pressed, div[role="gridcell"].jqx-fill-state-pressed { background: rgb(231, 232, 236) !important; }div.jqx-grid-column-header > div > div > span { color: rgb(102, 102, 102); font-size: 11px; font-style: normal; font-weight: 700; padding-left: 8px; padding-right: 8px; }.grid-header { color: rgb(102, 102, 102); font-size: 11px; font-style: normal; font-weight: 700; margin-top: 5px; padding-left: 8px; padding-right: 8px; }.overlay { position: fixed; background: rgba(51, 51, 51, 0.4); top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 10000; }.loader { border-width: 7px; border-style: solid; border-color: rgb(52, 152, 219) rgb(243, 243, 243) rgb(243, 243, 243); border-image: initial; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; display: block; z-index: 100000; position: absolute; top: 50%; left: 50%; }@-webkit-keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}.open > .dropdown-menu { width: 350px; }#value-table ul { overflow-x: auto !important; }#welcome { position: relative; height: 500px; }#welcome .well { padding: 50px; }.center { margin: 0px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }.form-horizontal .control-label { padding-top: 0px; margin: 0px 0px 10px; }.grid-icon { padding-top: 5px; padding-left: 40%; color: rgb(231, 76, 60); font-size: 14px !important; }.no-padding { padding-left: 0px; padding-right: 0px; }.text-right { text-align: right; }.text-left { text-align: left; }.text-capitalize { text-transform: capitalize; }.text-center { text-align: center; }.padding-left { padding-left: 15px; }.padding-right { padding-right: 15px !important; }.padding-bottom { padding-bottom: 10px !important; }.padding-top { padding-top: 15px !important; }.text-danger { color: rgb(231, 76, 60); }.float-right { float: right; }.word-overflow { word-wrap: break-word; }.centered { margin: 0px auto; }.modal { overflow-y: auto; }.modal-open { padding-right: 0px !important; }.table { font-size: 14px; }.th-style { color: rgb(102, 102, 102); background: linear-gradient(rgb(240, 240, 240) 0px, rgb(227, 227, 227) 100%); }.td-padding { padding: 8px; }.add-button { cursor: pointer; font-size: 32px; color: rgb(51, 122, 183); }#editModal table, #create table { margin: 0px auto; }.styled-well { border-left: 5px solid rgb(243, 156, 18); }#snapshot-editModal .modal-body, #snapshot-create .modal-body { padding: 15px 0px; }#title { text-align: left; }#login { text-align: right; margin: 10px; padding-right: 15px; color: rgb(255, 255, 255); font-size: 0.9em; }#login a { color: rgb(255, 255, 255); }#search_Class { margin-left: 30px; }#search_Fund { margin-left: 30px; }#input_Class { text-align: right; font-size: 0.9em; }#input_Fund { text-align: right; font-size: 0.9em; }#topnav { margin: 0rem; }#topnavcontainer { padding-left: 0px; padding-right: 0px; }#topnavtabs { text-align: center; }#topnavtabs li { display: table-cell; width: 20%; height: auto; vertical-align: bottom; border-top: 1px solid rgb(81, 115, 28); border-left: 1px solid rgb(81, 115, 28); border-right: 1px solid rgb(81, 115, 28); }#topnavtabs li.active a { background-color: rgb(148, 179, 44); border-color: transparent; }#topnavtabs li a:hover { background-color: rgb(148, 179, 44); border-color: transparent; }.topnavtab { background-color: rgb(64, 136, 0); color: white; border-radius: 0px; margin-right: 0px; padding: 2px; border: 1px solid rgb(86, 154, 19); display: block; position: relative; }.navtabs-item { display: table-cell; width: 20%; height: auto; vertical-align: bottom; border-top: 1px solid rgb(81, 115, 28); border-left: 1px solid rgb(81, 115, 28); border-right: 1px solid rgb(81, 115, 28); padding-left: 0px; padding-right: 0px; }.attr-tab-wrapper { float: left; margin-bottom: -1px; display: block; position: relative; }.activeTab { background-color: rgb(148, 179, 44); border-color: transparent; color: white; }.navSubTabs { margin-right: 2px; line-height: 1.42857; border: 1px solid transparent; border-radius: 4px 4px 0px 0px; padding: 10px 15px; display: block; }.activeSubTab { color: rgb(85, 85, 85); background-color: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(221, 221, 221) rgb(221, 221, 221) transparent; border-image: initial; cursor: default; }#topnavtabs a.active { background-color: rgb(148, 179, 44); border-color: transparent; color: white; }#topnavtabs a:hover { background-color: rgb(148, 179, 44); border-color: transparent; color: white; }#topnavtabs a:focus { color: white; }#attrtabs, #grouptabs, #configtabs { margin-bottom: 0px; }.select-style { padding: 3px 0px 3px 1px; }#add-new-group, #apply, #sub-apply, #add-new-subgroup { float: right; }#add-new-group, #add-new-subgroup { margin-bottom: 15px; }#apply, #sub-apply { margin-top: 15px; }#fund-save, #class-save, #proforma-save { margin: 10px 0px; float: right; display: block; }#proforma-search { margin-top: 5px; display: block; float: right; }#fundError, #classError, #detailError { text-align: center; }#userMsg { color: red; text-align: center; }#portfolio-details .panel, #class-details .panel { border-radius: 0px; background-color: rgb(240, 240, 240); }#portfolio-details .panel-default { border-left: 5px solid rgb(230, 147, 46); }#class-details .panel-default { border-left: 5px solid rgb(99, 191, 127); }#contentattrFundGrid div[role="columnheader"]:first-child, #contentattrFundGrid div[role="columnheader"]:nth-child(2), #contentattrClassGrid div[role="columnheader"]:first-child, #contentattrClassGrid div[role="columnheader"]:nth-child(2) { background-color: rgb(238, 238, 238); }#save-exclusion { float: right; }#lipper-form { margin-top: 15px; }#lipper-form .well { border-left: 5px solid rgb(243, 156, 18); }#lipper-form select { padding: 3px 0px 3px 1px; }#add-exclusion { cursor: pointer; font-size: 32px; color: rgb(51, 122, 183); }#remove-exclusion { cursor: pointer; }#lipper-attribute, #lipper-operator, #lipper-value { cursor: pointer; }#attribute, #value { cursor: pointer; width: 270px; }#group-operator { cursor: pointer; width: 180px; }#saveExclusionModal .modal-header { background-color: rgb(64, 136, 0); }#saveExclusionModal .modal-title { color: rgb(255, 255, 255); }#saveExclusionModal span { cursor: pointer; }#group-execution-form { margin: 0px auto; width: 100%; }#group-execution-form select { width: 100%; }.set-background { background: rgba(51, 51, 51, 0.5); }#confirm-preview { float: left; }.formRequired { color: red; }#contract-types, #cycle-year, #snapshot-name { width: 70%; }.text-red { color: rgb(231, 76, 60) !important; }.text-green { color: rgb(39, 174, 96) !important; }#summary-sec, #quartile-sec { width: 33.3333%; }#aspg-sec { width: 50%; }#T11 caption, #T12 caption, #T13 caption { color: rgb(0, 0, 0); font-weight: bold; }.summary table, .quartile table, .reportBody table, #aspg table, #tabularBody table { width: 100%; font-size: 11px; }.summary table, .quartile table { border-style: none !important; }.summary td, .summary th, .quartile td, .quartile th { border-style: dashed !important; }.reportBody table { margin-top: 25px; }.reportBody tr td { color: rgb(41, 128, 185); }.reportBody table, .reportBody td, #aspg table, #aspg td { border-style: none !important; }.reportBody th, #aspg th { border-top-style: none; border-right-style: none; border-left-style: none; }.summary table, .summary th, .summary td, .quartile table, .quartile th, .quartile td, .reportBody table, .reportBody th, .reportBody td { border: 1px solid black; border-collapse: collapse; }.summary th, .summary td, .quartile th, .quartile td, .reportBody th, .reportBody td { padding: 3px 0px 3px 10px; }.reportBody table tr th { border-top: 0px; border-right: 0px; border-left: 0px; }.summary table tr:first-child th, .quartile table tr:first-child th { border-top: 0px; }.summary table tr:last-child td, .quartile table tr:last-child td { }.summary table tr td:first-child, .summary table tr th:first-child, .quartile table tr td:first-child, .quartile table tr th:first-child { border-left: 0px; border-top: 0px; }.summary table tr td:last-child, .summary table tr th:last-child, .quartile table tr td:last-child, .quartile table tr th:last-child { border-right: 0px; }.margin-top { margin-top: 5%; }#totalExpenseByClassBody tr td, #te-tabular .reportBody tr td, #mf-tabular .reportBody tr td { color: rgb(0, 0, 0) !important; }#footnoteText { font-size: 11px; }.textarea { width: 98%; resize: none; overflow: hidden; min-height: 50px; font-size: 11px; }#left, #right { display: inline-block; font-size: 24px; cursor: pointer; transition: 0.6s ease; }.slideshow-container { max-width: 1000px; position: relative; margin: auto; }.myContent { display: none; }.fade-content { animation-name: fade; animation-duration: 0.5s; }@-webkit-keyframes fade-content {
0% { opacity: 0.4; }
100% { opacity: 1; }
}@keyframes fade-content {
0% { opacity: 0.4; }
100% { opacity: 1; }
}.show-content { display: block; }#config { font-size: 24px; cursor: pointer; }#tabularBody th, #tabularBody td { padding: 2px 0px; }#footer { width: 100%; }.symbol-padding-left { padding-left: 3px; }.symbol-padding-right { padding-right: 3px; }.showRow { display: block; }.hideRow { display: none; }.show-bottom-border { border-bottom: 1px solid rgb(0, 0, 0); vertical-align: bottom; }.jqx-button.jqx-fill-state-normal, .jqx-button.jqx-fill-state-hover { color: rgb(231, 76, 60); font-weight: bold; }#sortOrder-input { width: 50px; }#description-input { width: 100%; }.disable-button { pointer-events: none; opacity: 0.65; }span.disabled-button:hover { cursor: not-allowed; }.thick-border { border-left: 5px solid !important; border-right: 5px solid !important; }.border-bottom { border-bottom-width: medium; border-bottom-style: solid !important; }.no-bottom-border { border-bottom: none !important; border-right: 1px solid !important; border-left: 1px solid !important; border-top: 1px solid !important; }.no-border { border: none !important; }.large-padding-left { padding-left: 30px !important; }.align-bottom { vertical-align: bottom; }.extra-padding-left { padding-left: 42px; }.tabular-container { max-width: 1400px; position: relative; margin: auto; font-size: 11px; }#mappedGroupCodes { max-width: 1200px; margin: 0px auto; border: 2px solid; padding: 15px; }.display-inline { display: inline-block; }#footer hr { margin: 0px; border-top: 1px solid rgb(0, 0, 0); }#footer p { margin: 0px; font-style: italic; }.highlight { background: rgb(189, 195, 199); }.bold { font-weight: bold; }.italic { font-style: italic; }.page-break { break-after: page; }.status-box { height: 150px; width: 80%; margin: 0px auto; box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px; }.complete-box { border: 1px solid rgb(39, 174, 96); }.in-progress-box { border: 1px solid rgb(41, 128, 185); }.error-box { border: 1px solid rgb(192, 57, 43); }.status-header { padding: 15px; }.complete-header { background: rgb(39, 174, 96); }.in-progress-header { background: rgb(41, 128, 185); }.error-header { background: rgb(192, 57, 43); }.status-title { margin: 0px; line-height: 1.42857; color: rgb(245, 245, 245); }.status-body { position: relative; height: 98.6px; }.top-margin { margin-top: 20px; }.in-process { color: rgb(41, 128, 185); }.complete { color: rgb(39, 174, 96); }.hide-text { display: none; }.disable-nav { pointer-events: none; cursor: default; }.disable-nav .topnavtab { background: rgba(51, 51, 51, 0.3); }.ellipsis-anim span { opacity: 0; animation: ellipsis-dot 1.35s infinite; }.ellipsis-anim span:nth-child(1) { animation-delay: 0s; }.ellipsis-anim span:nth-child(2) { animation-delay: 0.1s; }.ellipsis-anim span:nth-child(3) { animation-delay: 0.2s; }.ellipsis-anim span:nth-child(4) { animation-delay: 0.3s; }@-webkit-keyframes ellipsis-dot {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}@keyframes ellipsis-dot {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}hr { margin-top: 20px; margin-bottom: 20px; border-top: 1px solid rgb(238, 238, 238); }caption { padding-top: 8px; padding-bottom: 8px; }h4 { font-size: 18px; }h5 { font-size: 14px; }h6 { font-size: 11px; margin-top: 0px !important; margin-bottom: 0px !important; }.fidelity-theme h6 { font-size: 11px !important; }h4, h5 { margin-top: 10px; margin-bottom: 10px; }p { margin: 0px 0px 10px; }.excel-btn { background: url("../img/excel.gif") center center no-repeat rgb(245, 245, 245); width: 26px; height: 26px; }@media (max-width: 992px) {
#snapshot-editModal .modal-body { text-align: center; }
#snapshot-editModal table { margin: 0px auto; }
}
</style>
<style type="text/css">
@page {size: 11.7in 8.3in;margin:1in;}table {-fs-table-paginate: paginate;border-spacing: 0;}
</style>
<title></title>
</head>
<body>
<div style="padding-top:15px">
<h4 class="text-capitalize"><em>fixed income and asset allocation fund board <!--template bindings={
"ng-reflect-ng-if": "true"
}--><span>- AA</span></em></h4><!--template bindings={
"ng-reflect-ng-if": "<h4><em>Summary of 2016 Bond Fund Total Expenses, Performance and Profitability Nicole's Title</em></h4>\n"
}--><span></span>
<h4><span><em>Summary of 2016 Bond Fund Total Expenses, Performance and Profitability Nicole's Title</em></span></h4>
</div>
</body>
</html>
Here is an image of what the header looks like in the generated PDF.header.PNG (14.2 KB)