Hi there
I’m having an issue getting an externally references css to apply during conversion. This is the code I’m using.
WebRequest request = WebRequest.Create(“http://my_url/sample2.html”);
request.Credentials = CredentialCache.DefaultCredentials;
HttpWebResponse response = (HttpWebResponse) request.GetResponse();
// Get the stream containing content returned by the server.
Stream dataStream = response.GetResponseStream();
// Open the stream using a StreamReader for easy access.
StreamReader reader = new StreamReader(dataStream);
// Read the content.
string responseFromServer = reader.ReadToEnd();
reader.Close();
dataStream.Close();
response.Close();
MemoryStream stream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(responseFromServer));
HtmlLoadOptions htmlLoadOptions = new HtmlLoadOptions(“http://my_url/”);
Document doc = new Document(stream, htmlLoadOptions);
doc.Save(“C:\temp\html_output.pdf”);
Attached is the html and the stylesheet. The images render properly but the div style is not applied. When I load the html directly, I can see that the styles are applied properly in HTML.
The converted PDF doesn’t reflect the font styles.
Can someone from Support answer my question? We’re evaluating purchasing Aspose and this could be a showstopper if it doesn’t work as expected.
Hi Sze,
Thanks for contacting support.
I have tested the scenario using following code snippet and as per my observations, the Image does not appear in PDF file but I can see that text formatting is being honored. For the sake of correction, I have logged this problem as PDFNEWNET-40257 in our issue tracking system. We will further look into the details of this problem and will keep you posted on the status of correction. Please be patient and spare us little time. We are sorry for this inconvenience.
For your reference, I have attached the output generated over my end.
[C#]
HtmlLoadOptions htmlLoadOptions = new HtmlLoadOptions(@"C:\pdftest\sample-code");
Document doc = new Document(@"C:\pdftest\sample-code\sample1.html", htmlLoadOptions);
doc.Save(@“C:\pdftest\sample-code\sample1_output.pdf”);
```The issues you have found earlier (filed as PDFNET-40257) have been fixed in Aspose.PDF for .NET 23.2.
Hi Team,
I am facing the issue with external css files even after applying suggested changes. Could you please help me to resolve the issue. Below is the code snippet which i am using
Application developed using ASP .NET Core and hosted in Azure kubernetes service
public byte[] GenerateAsposePDF(string htmlContent)
{
SetLicense();
// Create a memory stream to store the PDF bytes.
using (MemoryStream outputStream = new MemoryStream())
{
// Initialize a new Document object.
Document pdfDocument = new Document();
// Create HtmlLoadOptions to handle the HTML content.
var options = new HtmlLoadOptions
{
CustomLoaderOfExternalResources = new LoadOptions.ResourceLoadingStrategy(LoadResource),
HtmlMediaType = HtmlMediaType.Print,
IsEmbedFonts = true,
IsPriorityCssPageRule = true
};
// Add the HTML string to the document.
using (MemoryStream htmlStream = new MemoryStream(System.Text.Encoding.UTF8.GetBytes(htmlContent)))
{
// Bind the HTML content to the PDF document.
pdfDocument = new Document(htmlStream, options);
}
// Save the PDF to the memory stream.
pdfDocument.Save(outputStream);
// Close the document.
pdfDocument.Dispose();
// Return the PDF byte array.
return outputStream.ToArray();
}
}
private void SetLicense()
{
// Initialize license object
License license = new License();
// Load license from the file stream
var assemblyLocation = Assembly.GetExecutingAssembly().Location;
// Optionally, you can get the directory of the assembly
var assemblyDirectory = System.IO.Path.GetDirectoryName(assemblyLocation);
// Construct the file path
string filePath = System.IO.Path.Combine(assemblyDirectory!, "Aspose", "Aspose.Totalfor.NET.lic");
System.IO.FileStream myStream =
new System.IO.FileStream(
filePath,
System.IO.FileMode.Open);
// Set license
license.SetLicense(myStream);
}
private LoadOptions.ResourceLoadingResult LoadResource(string resourceURI)
{
if (resourceURI.Contains(".ttf")) { return null; }
byte[] contentData = GetContentFromUrl(resourceURI);
return new LoadOptions.ResourceLoadingResult(contentData);
}
private byte[] GetContentFromUrl(string url)
{
using (var client = new HttpClient())
return client.GetByteArrayAsync(url).GetAwaiter().GetResult();
}
If possible, can you please share the supplied HTML content for our reference as well? We will test the scenario in our environment and address it accordingly.
<head>
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="Deloitte.APT.UI.styles.css" />
<link rel="stylesheet" href="_content/Deloitte.APT.UI.SharedComponents/dds-styles.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous">
<link rel="stylesheet" href="telerik/custom-telerik.css" />
<link rel="stylesheet" href="CandidatePDF/candidatePDF.css" />
</head>
<div class="candidate-pdf-width1300"><div class="candidate-pdf-lm15"><div class="candidate-pdf-mb15"><div class="row candidate-pdf-userdata"><div class="col-4"><span class="candidate-pdf-fontbold">Name</span><br>
A R, Aakash Umashankar</div>
<div class="col-4"><span class="candidate-pdf-fontbold">Proposed level</span><br>
Market driven leadership destination</div></div></div><form method="post" action="/talent-review/24/e24aa95c-56b8-473a-a496-880897bb318a">
<div class="container-xxl my-5 pb-5"><div class="row"><div class="col-12 column-gap-3"><div class="row mb-4"><div class="col-10"><h6 class="fw-semibold">References</h6>
<p class="d-none">Complete the information below.</p>
<p class="">Be sure to list contacts that you go to market with and that know you well from all levels - analyst to PPMD. These lists will be used as a starting point to conduct interviews during the due diligence process.</p>
<p class="d-none">Complete the information below.</p>
<p class="d-none">
List significant relationships you have developed within the firm.
</p></div></div></div></div>
<div class="row pb-5 d-none"><div class="col-12 column-gap-3"><div class="row"><div class="col-9"><h6 class="fw-semibold mb-3">Key PPMD/Fellow/EDL/relationship</h6>
<p>List up to 10 key internal relationships. You should include at least 1 relationship outside of the A&A business.</p></div></div></div>
<div class="col-12">
<div __internal_stopPropagation_onkeydown data-id="88b9e9ff-2d9e-4f9b-a778-212b1f8845f1" class="telerik-blazor k-grid k-grid-md" dir="ltr" style="">
<div class="k-grid-aria-root" id="c7dafcd0-7346-4dd4-875d-d6fa85216359" role="grid" aria-colcount="7" aria-label="Data table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
<table class="k-grid-header-table k-table k-table-md" role="presentation" style="width: ;">
<colgroup>
<col style="width: 130px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 120px" />
<col style="width: 110px" />
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-id="0fd70402-c0c9-4634-92f2-ba31447b7ac9">
<tr class="k-table-row" role="row" data-render-row-index="0">
<th data-has-children="false" data-level="1" data-cell-navigation-id="0" data-parent-col-initialization-index="-1" data-col-initialization-index="0" data-col-index="0" aria-sort="none" aria-haspopup="dialog" aria-colindex="1" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Contact name </span>
</span>
<div data-id="7e81236f-0b6a-4201-9e15-f9de710e6b5a" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Contact name column filter menu settings" aria-haspopup="dialog" aria-label="Contact name column filter menu settings" aria-controls="39dfa351-be83-47ce-ac5d-d879bff55807" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="1" data-parent-col-initialization-index="-1" data-col-initialization-index="1" data-col-index="1" aria-sort="none" aria-haspopup="dialog" aria-colindex="2" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Email </span>
</span>
<div data-id="ea6a546f-81e7-488e-93e5-cc3b3163076a" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Email column filter menu settings" aria-haspopup="dialog" aria-label="Email column filter menu settings" aria-controls="dbe9b60b-2640-4f26-a4de-f08cfec5a943" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="2" data-parent-col-initialization-index="-1" data-col-initialization-index="2" data-col-index="2" aria-sort="none" aria-haspopup="dialog" aria-colindex="3" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Business </span>
</span>
<div data-id="a7dfef36-3d30-4144-b3bb-2f494561d611" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Business column filter menu settings" aria-haspopup="dialog" aria-label="Business column filter menu settings" aria-controls="a173b837-95df-4787-b772-06aca876710b" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="3" data-parent-col-initialization-index="-1" data-col-initialization-index="3" data-col-index="3" aria-sort="none" aria-haspopup="dialog" aria-colindex="4" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Office </span>
</span>
<div data-id="e171907f-5cdb-444d-a206-7a055a87ad02" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Office column filter menu settings" aria-haspopup="dialog" aria-label="Office column filter menu settings" aria-controls="546abdae-8a0f-40d0-b7c2-901c0239924a" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="4" data-parent-col-initialization-index="-1" data-col-initialization-index="4" data-col-index="4" aria-sort="none" aria-haspopup="dialog" aria-colindex="5" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Title/Level </span>
</span>
<div data-id="9e3b027f-146e-4ab5-91ad-de0ffce31143" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Title/Level column filter menu settings" aria-haspopup="dialog" aria-label="Title/Level column filter menu settings" aria-controls="d51d919c-8411-48a7-8d06-cfcd52ac2ca7" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="5" data-parent-col-initialization-index="-1" data-col-initialization-index="5" data-col-index="5" aria-sort="none" aria-colindex="6" class="k-header k-touch-action-none k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Relationship description </span>
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-loader-container telerik-blazor k-loader-container-md k-loader-top" dir="ltr" style="display: none;" data-id="003cb16f-3e94-4d32-abfb-4ec74203ee23">
<div class="k-loader-container-overlay k-overlay-light"></div>
<div class="k-loader-container-inner ">
<div class="k-loader telerik-blazor k-loader-spinner-3 k-loader-lg k-loader-primary" dir="ltr">
<div class="k-loader-canvas">
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
</div>
</div>
</div>
</div>
<div class="k-grid-content " data-id="57d5290d-4d1e-455e-a488-d1454ce678a2">
<div class="">
<div class="" style="" data-translate="0" data-total="0">
<table data-role="grid" role="presentation" class="k-grid-table k-table k-table-md" style="height: auto; width: ;">
<colgroup>
<col class="" style="width: 130px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 120px;" />
<col class="" style="width: 110px;" />
</colgroup>
<tbody class="k-table-tbody" role="rowgroup">
<tr class="k-grid-norecords k-table-row" role="row" data-render-row-index="1">
<td class="k-table-td" colspan="6" data-col-index="0" tabindex="0">
No records available. </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="">
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="row pb-5 "><div class="col-12 column-gap-3"><div class="row"><div class="col-9 d-none" id="cmg-header"><h6 class="fw-semibold mb-3">Key PPMD / leader relationships</h6>
<p>List any key PPMD relationships.</p></div>
<div class="col-9 " id="consulting-header"><h6 class="fw-semibold mb-3">Key PPMD / Fellow / EDL relationships</h6>
<p>List 8-10 PPMD, Technology Fellow, Creative Fellow and/or Engagement Delivery Leader relationships. Do not include your OP / Industry / Offering / Sector leader unless they are your lead project PPMD, coach, or similar.</p></div>
<div class="col-9 d-none" id="enablingareastax-header"><h6 class="fw-semibold mb-3">Key PPMD relationships</h6>
<p class="d-none">List up to 3 key PPMD relationships.</p>
<p class="d-none">Provide up to 10 significant partner/principal and managing director relationships in the U.S. firm. Relationships may be from client assignments, organization-wide projects, cross-Business exposure, deployments, practice/peer review, or any other special projects.</p></div></div></div>
<div class="col-12">
<div __internal_stopPropagation_onkeydown data-id="09f515d9-25ca-4494-a52b-4ca394e6621d" class="telerik-blazor k-grid k-grid-md" dir="ltr" style="">
<div class="k-grid-aria-root" id="6033a903-0e57-45df-9a70-fd8f2daa47d6" role="grid" aria-colcount="7" aria-label="Data table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
<table class="k-grid-header-table k-table k-table-md" role="presentation" style="width: ;">
<colgroup>
<col style="width: 130px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 110px" />
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-id="664d7e1e-333c-44b8-8beb-58ba0d4406b5">
<tr class="k-table-row" role="row" data-render-row-index="0">
<th data-has-children="false" data-level="1" data-cell-navigation-id="0" data-parent-col-initialization-index="-1" data-col-initialization-index="0" data-col-index="0" aria-sort="none" aria-haspopup="dialog" aria-colindex="1" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Contact name </span>
</span>
<div data-id="3cf5c5ed-bca1-4b14-8867-3889ff27e3e1" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Contact name column filter menu settings" aria-haspopup="dialog" aria-label="Contact name column filter menu settings" aria-controls="cb2ff327-ccd6-4f92-a97e-7e32c2edf2a3" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="1" data-parent-col-initialization-index="-1" data-col-initialization-index="1" data-col-index="1" aria-sort="none" aria-haspopup="dialog" aria-colindex="2" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Email </span>
</span>
<div data-id="fbc07893-fe6e-4d9b-b74c-f4882fd87a09" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Email column filter menu settings" aria-haspopup="dialog" aria-label="Email column filter menu settings" aria-controls="bb9eb442-c336-4f75-9edf-bb72f46bea36" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="2" data-parent-col-initialization-index="-1" data-col-initialization-index="4" data-col-index="2" aria-sort="none" aria-haspopup="dialog" aria-colindex="3" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Level </span>
</span>
<div data-id="abd15c4a-ab44-40f1-bcd2-59d76363c435" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Level column filter menu settings" aria-haspopup="dialog" aria-label="Level column filter menu settings" aria-controls="5b2a8934-0376-4ff0-a28c-c125d4815a0d" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="3" data-parent-col-initialization-index="-1" data-col-initialization-index="5" data-col-index="3" aria-sort="none" aria-colindex="4" class="k-header k-touch-action-none k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Relationship description </span>
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-loader-container telerik-blazor k-loader-container-md k-loader-top" dir="ltr" style="display: none;" data-id="e676d0e5-90bb-4d88-87c2-0840ce794fe3">
<div class="k-loader-container-overlay k-overlay-light"></div>
<div class="k-loader-container-inner ">
<div class="k-loader telerik-blazor k-loader-spinner-3 k-loader-lg k-loader-primary" dir="ltr">
<div class="k-loader-canvas">
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
</div>
</div>
</div>
</div>
<div class="k-grid-content " data-id="90e7f19e-8699-4cc4-b00b-8d7e25af0fe1">
<div class="">
<div class="" style="" data-translate="0" data-total="1">
<table data-role="grid" role="presentation" class="k-grid-table k-table k-table-md" style="height: auto; width: ;">
<colgroup>
<col class="" style="width: 130px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 110px;" />
</colgroup>
<tbody class="k-table-tbody" role="rowgroup">
<tr role="row" class="k-master-row k-table-row " data-render-row-index="1">
<td role="gridcell" colspan="1" data-col-index="0" class="k-table-td" style="" aria-colindex="1">
Amin, Stephanie Jones</td>
<td role="gridcell" colspan="1" data-col-index="1" class="k-table-td" style="" aria-colindex="2">
50645405@tst.deloitte.com</td>
<td role="gridcell" colspan="1" data-col-index="2" class="k-table-td" style="" aria-colindex="3">
DC Consultant</td>
<td role="gridcell" colspan="1" data-col-index="3" class="k-table-td" style="" aria-colindex="4">
chcxnh</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="">
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="row pb-5 "><div class="col-12 column-gap-3"><div class="row"><div class="col-9 " id="cmg-header"><h6 class="fw-semibold mb-3">Key practitioner & peer relationships</h6>
<p class="d-none">List any Senior Manager-level or below practitioner and peer relationships in your core network.</p>
<p class="">List 8-10 Senior Manager-level or below practitioner and peer relationships in your core network.</p>
<p class="d-none">List up to 3 Senior Manager-level or below practitioner and peer relationships in your core network.</p></div></div></div>
<div class="col-12">
<div __internal_stopPropagation_onkeydown data-id="dbcb228a-fc68-452a-a81f-a8cf0ab5b515" class="telerik-blazor k-grid k-grid-md" dir="ltr" style="">
<div class="k-grid-aria-root" id="9014405b-5591-4292-84c5-6a592cf69f2d" role="grid" aria-colcount="7" aria-label="Data table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
<table class="k-grid-header-table k-table k-table-md" role="presentation" style="width: ;">
<colgroup>
<col style="width: 130px" />
<col style="width: 100px" />
<col style="width: 120px" />
<col style="width: 110px" />
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-id="36b9036f-7e83-4445-953e-bb89dc750d81">
<tr class="k-table-row" role="row" data-render-row-index="0">
<th data-has-children="false" data-level="1" data-cell-navigation-id="0" data-parent-col-initialization-index="-1" data-col-initialization-index="0" data-col-index="0" aria-sort="none" aria-haspopup="dialog" aria-colindex="1" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Contact name </span>
</span>
<div data-id="fa5d5eea-348f-4ebf-8c46-325b1bd4cbad" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Contact name column filter menu settings" aria-haspopup="dialog" aria-label="Contact name column filter menu settings" aria-controls="2d2e25fc-e9cd-43a9-ac50-56e96738a773" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="1" data-parent-col-initialization-index="-1" data-col-initialization-index="1" data-col-index="1" aria-sort="none" aria-haspopup="dialog" aria-colindex="2" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Email </span>
</span>
<div data-id="481acf4a-944a-49df-900f-09c5770b31b3" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Email column filter menu settings" aria-haspopup="dialog" aria-label="Email column filter menu settings" aria-controls="0aca37c0-ffba-4447-a80e-6e0f221089d4" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="2" data-parent-col-initialization-index="-1" data-col-initialization-index="4" data-col-index="2" aria-sort="none" aria-haspopup="dialog" aria-colindex="3" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Level </span>
</span>
<div data-id="930318b6-477f-4f86-8027-e7916d4ec076" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Level column filter menu settings" aria-haspopup="dialog" aria-label="Level column filter menu settings" aria-controls="0c8db26e-278e-4080-945c-288ebb0652fe" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="3" data-parent-col-initialization-index="-1" data-col-initialization-index="5" data-col-index="3" aria-sort="none" aria-colindex="4" class="k-header k-touch-action-none k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Relationship description </span>
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-loader-container telerik-blazor k-loader-container-md k-loader-top" dir="ltr" style="display: none;" data-id="38f91f30-f994-4d26-b010-7398c11f6e9e">
<div class="k-loader-container-overlay k-overlay-light"></div>
<div class="k-loader-container-inner ">
<div class="k-loader telerik-blazor k-loader-spinner-3 k-loader-lg k-loader-primary" dir="ltr">
<div class="k-loader-canvas">
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
</div>
</div>
</div>
</div>
<div class="k-grid-content " data-id="47445662-6ab0-4c3e-bf5e-dd5361f85176">
<div class="">
<div class="" style="" data-translate="0" data-total="1">
<table data-role="grid" role="presentation" class="k-grid-table k-table k-table-md" style="height: auto; width: ;">
<colgroup>
<col class="" style="width: 130px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 120px;" />
<col class="" style="width: 110px;" />
</colgroup>
<tbody class="k-table-tbody" role="rowgroup">
<tr role="row" class="k-master-row k-table-row " data-render-row-index="1">
<td role="gridcell" colspan="1" data-col-index="0" class="k-table-td" style="" aria-colindex="1">
A, James</td>
<td role="gridcell" colspan="1" data-col-index="1" class="k-table-td" style="" aria-colindex="2">
50634765@tst.deloitte.com</td>
<td role="gridcell" colspan="1" data-col-index="2" class="k-table-td" style="" aria-colindex="3">
External</td>
<td role="gridcell" colspan="1" data-col-index="3" class="k-table-td" style="" aria-colindex="4">
vcnghvghm</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="">
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="row pb-5 d-none"><div class="col-12 column-gap-3"><div class="row"><div class="col-9 d-none" id="cmg-header"><h6 class="fw-semibold mb-3">Coaching and mentoring relationships</h6>
<p class="d-none">Please list any formal coachee or informal mentee relationships. Maximum of 7 relationships.</p></div></div></div>
<div class="col-12">
<div __internal_stopPropagation_onkeydown data-id="7df69c17-ea4d-4c33-b378-6331da6e9b73" class="telerik-blazor k-grid k-grid-md" dir="ltr" style="">
<div class="k-grid-aria-root" id="b9622e03-b67f-4d9a-b829-8df4fbbfed01" role="grid" aria-colcount="7" aria-label="Data table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
<table class="k-grid-header-table k-table k-table-md" role="presentation" style="width: ;">
<colgroup>
<col style="width: 130px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 110px" />
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-id="18725a7d-e46e-413e-a7e2-b9c7f2a2d4dd">
<tr class="k-table-row" role="row" data-render-row-index="0">
<th data-has-children="false" data-level="1" data-cell-navigation-id="0" data-parent-col-initialization-index="-1" data-col-initialization-index="0" data-col-index="0" aria-sort="none" aria-haspopup="dialog" aria-colindex="1" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Contact name </span>
</span>
<div data-id="b408486b-1208-47e7-b7aa-0a4ac6451964" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Contact name column filter menu settings" aria-haspopup="dialog" aria-label="Contact name column filter menu settings" aria-controls="f7def2d3-01b4-4892-9c57-16d676c93a69" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="1" data-parent-col-initialization-index="-1" data-col-initialization-index="1" data-col-index="1" aria-sort="none" aria-haspopup="dialog" aria-colindex="2" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Email </span>
</span>
<div data-id="e05ef03d-05c0-41c2-a526-79f3bb282d36" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Email column filter menu settings" aria-haspopup="dialog" aria-label="Email column filter menu settings" aria-controls="53e463ea-4607-4e41-8bb6-f729f5f4884f" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="2" data-parent-col-initialization-index="-1" data-col-initialization-index="2" data-col-index="2" aria-sort="none" aria-haspopup="dialog" aria-colindex="3" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Business </span>
</span>
<div data-id="fd6f399c-82d9-4d3e-92c3-8df27402640c" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Business column filter menu settings" aria-haspopup="dialog" aria-label="Business column filter menu settings" aria-controls="1db76780-912e-4cc5-be5f-d5a095715736" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="3" data-parent-col-initialization-index="-1" data-col-initialization-index="3" data-col-index="3" aria-sort="none" aria-haspopup="dialog" aria-colindex="4" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Office </span>
</span>
<div data-id="a539e3ac-b832-4991-bc18-048e6479584e" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Office column filter menu settings" aria-haspopup="dialog" aria-label="Office column filter menu settings" aria-controls="e7b7fcc7-6638-4f66-8c17-edcaa36d1c16" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="4" data-parent-col-initialization-index="-1" data-col-initialization-index="4" data-col-index="4" aria-sort="none" aria-haspopup="dialog" aria-colindex="5" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Level </span>
</span>
<div data-id="90689aaf-3a14-4bab-8e04-dbfe36226ceb" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Level column filter menu settings" aria-haspopup="dialog" aria-label="Level column filter menu settings" aria-controls="bf97e108-efd8-428e-bd30-aadb2661db09" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="5" data-parent-col-initialization-index="-1" data-col-initialization-index="5" data-col-index="5" aria-sort="none" aria-colindex="6" class="k-header k-touch-action-none k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Relationship description </span>
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-loader-container telerik-blazor k-loader-container-md k-loader-top" dir="ltr" style="display: none;" data-id="e01b5d05-9d0b-4b61-874d-d3dc2367751d">
<div class="k-loader-container-overlay k-overlay-light"></div>
<div class="k-loader-container-inner ">
<div class="k-loader telerik-blazor k-loader-spinner-3 k-loader-lg k-loader-primary" dir="ltr">
<div class="k-loader-canvas">
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
</div>
</div>
</div>
</div>
<div class="k-grid-content " data-id="ea6e241a-ea44-40c8-93a7-331eca59f0d2">
<div class="">
<div class="" style="" data-translate="0" data-total="0">
<table data-role="grid" role="presentation" class="k-grid-table k-table k-table-md" style="height: auto; width: ;">
<colgroup>
<col class="" style="width: 130px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 110px;" />
</colgroup>
<tbody class="k-table-tbody" role="rowgroup">
<tr class="k-grid-norecords k-table-row" role="row" data-render-row-index="1">
<td class="k-table-td" colspan="6" data-col-index="0" tabindex="0">
No records available. </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="">
</div>
</div>
</div>
</div>
</div>
</div></div>
<div class="row pb-5 d-none"><div class="col-12 column-gap-3"><div class="row"><div class="col-9 d-none" id="cmg-header"><h6 class="fw-semibold mb-3">Key external relationships</h6>
<p class="d-none">List any key external relationships.</p></div></div></div>
<div class="col-12">
<div __internal_stopPropagation_onkeydown data-id="c45ee5a5-116f-4fbb-9a48-c045d0ffce8a" class="telerik-blazor k-grid k-grid-md" dir="ltr" style="">
<div class="k-grid-aria-root" id="9ed23b0e-b2f4-47b7-acbe-afc703f2a573" role="grid" aria-colcount="5" aria-label="Data table">
<div class="k-grid-header" role="presentation">
<div class="k-grid-header-wrap" role="presentation">
<table class="k-grid-header-table k-table k-table-md" role="presentation" style="width: ;">
<colgroup>
<col style="width: 110px" />
<col style="width: 100px" />
<col style="width: 100px" />
<col style="width: 110px" />
</colgroup>
<thead class="k-table-thead" role="rowgroup" data-id="81fc36f7-a081-4895-adf0-09f1b8a9b287">
<tr class="k-table-row" role="row" data-render-row-index="0">
<th data-has-children="false" data-level="1" data-cell-navigation-id="0" data-parent-col-initialization-index="-1" data-col-initialization-index="0" data-col-index="0" aria-sort="none" aria-haspopup="dialog" aria-colindex="1" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Contact name </span>
</span>
<div data-id="9c1a1e85-bacd-4516-9f9e-969dfde46eb5" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Contact name column filter menu settings" aria-haspopup="dialog" aria-label="Contact name column filter menu settings" aria-controls="4d43eec0-d8cf-4fb8-87a6-714dd23f2577" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="1" data-parent-col-initialization-index="-1" data-col-initialization-index="1" data-col-index="1" aria-sort="none" aria-haspopup="dialog" aria-colindex="2" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Client </span>
</span>
<div data-id="e82716cb-533e-4c6d-a6e9-82ac19eeab13" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Client column filter menu settings" aria-haspopup="dialog" aria-label="Client column filter menu settings" aria-controls="95104375-ac85-4633-abc6-be07e0a544bd" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="2" data-parent-col-initialization-index="-1" data-col-initialization-index="2" data-col-index="2" aria-sort="none" aria-haspopup="dialog" aria-colindex="3" class="k-header k-touch-action-none k-filterable k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Title/Level </span>
</span>
<div data-id="8eda5d9a-89ab-46b2-a577-a3ca4d619eeb" __internal_stopPropagation_onclick class="k-grid-filter-menu k-grid-header-menu " title="Title/Level column filter menu settings" aria-haspopup="dialog" aria-label="Title/Level column filter menu settings" aria-controls="0022c236-bb45-4441-b0d1-f49e8d4d70d8" aria-expanded="false" tabindex="-1" role="button">
<span class="telerik-blazor k-icon k-svg-icon k-svg-i-filter" aria-hidden="true">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M64 64v32l160 160v224l64-64V256L448 96V64z" />
</svg>
</span>
</div>
</span>
</th>
<th data-has-children="false" data-level="1" data-cell-navigation-id="3" data-parent-col-initialization-index="-1" data-col-initialization-index="3" data-col-index="3" aria-sort="none" aria-colindex="4" class="k-header k-touch-action-none k-table-th" data-role="columnsorter" role="columnheader" rowspan="1" colspan="1">
<span class="k-cell-inner">
<span class="k-link">
<span class="k-column-title">
Relationship description </span>
</span>
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-loader-container telerik-blazor k-loader-container-md k-loader-top" dir="ltr" style="display: none;" data-id="b072c112-26d4-46f8-80b0-0b67b32c95fe">
<div class="k-loader-container-overlay k-overlay-light"></div>
<div class="k-loader-container-inner ">
<div class="k-loader telerik-blazor k-loader-spinner-3 k-loader-lg k-loader-primary" dir="ltr">
<div class="k-loader-canvas">
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
<span class="k-loader-segment"></span>
</div>
</div>
</div>
</div>
<div class="k-grid-content " data-id="ca02f872-7000-45ce-bab5-74f035940775">
<div class="">
<div class="" style="" data-translate="0" data-total="0">
<table data-role="grid" role="presentation" class="k-grid-table k-table k-table-md" style="height: auto; width: ;">
<colgroup>
<col class="" style="width: 110px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 100px;" />
<col class="" style="width: 110px;" />
</colgroup>
<tbody class="k-table-tbody" role="rowgroup">
<tr class="k-grid-norecords k-table-row" role="row" data-render-row-index="1">
<td class="k-table-td" colspan="4" data-col-index="0" tabindex="0">
No records available. </td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="" style="">
</div>
</div>
</div>
</div>
</div>
</div></div>
</div></form></div></div>
<div class="k-animation-container telerik-blazor " data-id="d7544847-3de7-465c-8f6d-e02b8bf01cff" id="7d2a8742-1066-488f-914e-88b721d65908" dir="ltr" style="width: auto">
<div data-id="1aa456b7-c42f-4ce0-a23c-c2b1b1d7eea6" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="6dd8a0a6-ec56-4b47-96f6-a79b14aed1fd" id="ccaa1c9a-0397-480a-b255-09e2a0ae6ac8" dir="ltr" style="width: auto">
<div data-id="aee26439-240b-4650-a403-672252276cab" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="2e23031f-17da-40a7-a374-ed6bf0667ee4" id="0cfb340d-b7e8-40f0-bcda-91dd1e8ed01b" dir="ltr" style="width: auto">
<div data-id="e442321a-4279-4f27-a6fe-fc5fe64aa1e4" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="92877d4a-698e-4d31-9e8d-dc346dd8ef79" id="cedd1d6b-21a3-413e-b877-8e809e8775d2" dir="ltr" style="width: auto">
<div data-id="84987010-da8c-4f9e-ac64-1b5635f786a6" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="f1edf3b6-55ad-4453-99ca-0c7655286577" id="9dcd7e8c-0e0e-499b-9cad-5a144bec93cc" dir="ltr" style="width: auto">
<div data-id="8176d7b2-5220-4e11-a7cc-5c648fbf3e21" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="86600327-4fc4-405d-949c-ad594c89ba9c" id="3785e4e2-5570-4247-857e-585e07d89d8a" dir="ltr" style="width: auto">
<div data-id="f333f199-23fe-4180-992f-02c50b41f587" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="a3798963-4d62-42d2-ae41-804a334bc9ed" id="4df04116-2fa1-4b2a-b811-2b005b9a185c" dir="ltr" style="width: auto">
<div data-id="95f92a75-b6a5-4116-8636-679e98854587" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="fe905f88-ad91-4c17-9888-c0709871676e" id="b9f3c84c-34cb-4e19-ab4c-49507a55e354" dir="ltr" style="width: auto">
<div data-id="ee444a8f-f544-4829-b9ff-faee51869bf1" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="438761ef-8a75-495e-8296-1273df957228" id="e35e6d25-fa18-4f9b-9cbe-f825c24639df" dir="ltr" style="width: auto">
<div data-id="f2c334a5-68e3-447d-97ea-ac6d0263ec31" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="f461ce77-ac9e-41c4-bc5b-3ac6d1b0861a" id="dd0b4310-e888-4618-aba2-276315705788" dir="ltr" style="width: auto">
<div data-id="ff52b2f5-0259-4322-be45-5ff1c0e71486" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="718f3ae9-bf01-4eff-b358-a23108baad0f" id="11735e3b-d23f-4685-8c88-6b89b890cf46" dir="ltr" style="width: auto">
<div data-id="81e9f2cf-334a-4742-91a2-01713943a94f" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="2c3a8fee-e010-46c1-8634-dbd9cc5669e8" id="c05f090b-b788-405b-a6ff-d0040483f1d9" dir="ltr" style="width: auto">
<div data-id="5eeca4f9-b053-4cc5-853e-7b7be967eff0" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="5df0ed64-253a-4ac1-aeec-38f4e3c7078f" id="ba11e346-88b0-4889-8060-45b6767cb046" dir="ltr" style="width: auto">
<div data-id="bd20304e-c0f2-4294-8b57-f6fd587fc56f" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="df8afecd-d620-48ac-adf8-95b69eb40445" id="4f041a72-d971-4687-b5f7-6fa2061424ff" dir="ltr" style="width: auto">
<div data-id="56572e2a-48dd-4fa4-9e0c-1b613900d0c8" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="8246041a-416d-4fd4-b5e9-1b1d97cec78d" id="4014b849-e13d-4891-a313-91922c8e5940" dir="ltr" style="width: auto">
<div data-id="533d1dcd-d374-4558-b8ad-78f54ea10166" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="3472c565-314f-499f-94bf-bcf124a08d50" id="05d136c1-b70f-4a57-a1b1-1e94d18a2f44" dir="ltr" style="width: auto">
<div data-id="3a1fd6fa-33e9-4017-9643-920625f2c482" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="fff3ac97-2c1a-481b-b8ba-dc1ccbf6545d" id="25aaf946-fb61-4cc8-8a2f-6b99f759d6f3" dir="ltr" style="width: auto">
<div data-id="1691c1b3-4ecd-48a0-8fb6-555929021696" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="6327ed3c-3dc6-4782-97a4-493d4abc79e6" id="b276b4a7-1c5e-44f4-8186-d0cb5e87cba4" dir="ltr" style="width: auto">
<div data-id="762974a5-8ac6-4573-a4cf-84233241b785" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
<div class="k-animation-container telerik-blazor " data-id="9b710eed-709f-4866-8695-6898939953b4" id="c8fe29e2-2bd6-4cab-ab3e-dfef66f89563" dir="ltr" style="width: auto">
<div data-id="5647a616-c648-42d9-affe-61949df68d9c" style="transition-duration: 300ms;display: none" class="k-child-animation-container">
</div>
</div>
The HTML you provided uses some CSS files, can you please provide them as well in .zip format?
i used normal bootstrap css along with some custom css. I can not share the files due to some compliance issues
We need those files to view the HTML as properly rendered so that we can try to generate a PDF from it and then compare the results. The HtmlLoadOptions need to be initialized with the path where CSS and other image resources are present e.g. new HtmlLoadOptions("{Path to CSS and Images"}); We are afraid that we cannot investigate or comment further on the issue without reproducing it in our environment.
You can please prepare some dummy/sample HTML with CSS and other resources and share that with us that can help in replicate the same scenario that you are currently facing.