RadFlowDocument document = provider.Import(htmlContent, new TimeSpan(0, 0, 0, 30));I have a PDF that's supposed to use bootstrap styles, and I'm having trouble applying them. I have three divs that need to be in-line but they keep end up on their own line instead. They are an image, then a title, then another image. All need to be on one line. But bootstrap, flex, whatever I throw at it, they keep going on their own lines instead, like block elements.
I want: image/title/image
I get:
image
title
image
Here's the cshtml:
@using Kendo.Mvc.Extensions
<link href="~/Content/css/sprite.css" rel="stylesheet" />
<link href="~/Content/css/build/report.css" rel="stylesheet" />
<style>
.row {
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
display: flex !important;
flex-wrap: wrap;
margin-top: calc(-1 * var(--bs-gutter-y));
margin-right: calc(-0.5 * var(--bs-gutter-x));
margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * 0.5);
padding-left: calc(var(--bs-gutter-x) * 0.5);
margin-top: var(--bs-gutter-y);
}
.tbox {
display: table;
width: 100%;
height: 100%;
border-spacing: 0;
table-layout: fixed;
outline: 5px solid red;
}
.tcol
{
display: table-cell;
float: none;
height: 100%;
vertical-align: top;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.33333333%;
}
</style>
<div class="row">
<div class="col-md-offset-1 col-md-10 col">
<div class="tbox" style="height: auto; display: flex !important">
<div class="tcol" style="width: 25%">
<img class="logo" src="URI" alt="official seal" />
</div>
<div class="tcol text-center" style="width: 25%">
<h1 class="m-15">
TITLE OF PDF
</h1>
<h2> @Model.ProjectNumber Project Plan </h2>
<h4 class="datestamp">@DateTime.UtcNow.UtcToApplicationTimeZone().ToString("MM/dd/yyyy")</h4>
</div>
@if (Model.ProgramId == (Int32)EnumRefProgram.ABCDEF)
{
<div class="tcol text-right" style="width: 25%">
<img class="logo" src="URI" alt="official seal" />
</div>
}
else
{
<div class="tcol text-right" style="width: 25%">
<img class="logo" src="URI" alt="official seal" />
</div>
}
</div>
</div>
</div>
This isn't the whole document, just the relevant part I'm struggling with. Linking bootstrap directly didn't work (and seemed like a bad idea anyways due to its size) so I just started copying in the relevant classes into the style tag. The .row class alone should be sufficient to make the three divs (the two images and the title) all inline in one line, but it seems to have no effect in the PDF. I also tried making one of the divs a flex container by giving it display:flex and again, no effect. If I grab the HTML string from the debugger, the moment before it is fed into this: RadFlowDocument document = provider.Import(htmlContent, new TimeSpan(0, 0, 0, 30)); and I take that html and save it as an html document and open it in my browser, the classes work appropriately, the image/title/image display inline as desired. So I know the mark up and the CSS are functional, but I don't get why it doesn't work with the conversion to PDF.
I'm also aware that putting flex in one of the divs inside a .row div is redundant but I was trying to figure out what wasn't working.
1 Answer, 1 is accepted
Hello Jonathan,
Thank you for reaching out and for the provided resources. I was able to reproduce and examine the same results on my end.
It appears that the HTML layout depends on Flexbox and CSS features that are not supported by Microsoft Word’s HTML import. You can confirm this yourself by opening the HTML directly into Word. That is important because we try to make our WordsProcessing library follow the same MS Word standards and features, which leads to the results you are experiencing when processing the HTML content.
Browsers render the HTML horizontally because Flexbox is respected there. On the other hand, MS Word’s and WordsProcessing's HTML importer does not support (or strips) modern CSS features like Flexbox, CSS custom properties, or mixing display: flex with display: table), so WordsProcessing falls back to block layout and stacks the elements vertically.
We also already have a feature request logged in our Feedback Portal regarding the support of the "Display" CSS property - WordsProcessing: HtmlFormatProvider: Provide support for CSS Display property values. If you are interested in this task, please know that you can cast your vote for it in order to increase its priority in our backlog and to subscribe so you can track its progress and receive notifications about potential status updates in the future.
If you have access to and can modify the input HTML, and can control its structure and appearance, I suggest using HTML tables as a workaround. Our library handles real tables much more predictably. For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.header-table {
width: 100%;
border-collapse: collapse;
}
.header-table td {
vertical-align: top;
width: 25%;
text-align: center;
}
.header-table td.image-left,
.header-table td.image-right {
text-align: left;
}
.logo {
max-width: 100%;
height: auto;
display: block;
}
h1,h2,h4 { margin: 4px 0; }
</style>
</head>
<body>
<table class="header-table">
<tr>
<td class="image-left">
<img class="logo" src="..." alt="official seal" />
</td>
<td>
<h1>TITLE OF PDF</h1>
<h2>@Model.ProjectNumber Project Plan</h2>
<h4 class="datestamp">@DateTime.UtcNow.UtcToApplicationTimeZone().ToString("MM/dd/yyyy")</h4>
</td>
<td class="image-right">
<img class="logo" src="..." alt="official seal" />
</td>
</tr>
</table>
</body>
</html>
This should display both images and text on the same level. I hope it helps.
Regards,
Yoan
Progress Telerik
Start the 2025 Survey