How to add css style for html when using insertHtml method

hanhnbfsoft · July 9, 2015, 5:03am

Hi,

I’m using Aspose Word with DLL version 15.3 to export report.
In my project I have used insertHtml method to insert html into builder. Example:

builder.insertHtml("<table class=\"table-dynamic table table-striped table-bordered resizable dataTable projectListTableCsm no-footer\"><thead><tr><th class=\"templatesName\" style=\"Width:5%\">T#</th><th class=\"templatesName\" style=\"Width:35%\">Threat Name</th><th class=\"templatesName\" style=\"Width:8%\">Probability</th><th class=\"templatesName\" style=\"Width:8%\">Impact Scale</th><th class=\"templatesName\" style=\"Width:8%\">Risk Scale</th></tr></thead><tbody><tr><td class=\"templatesName\">T1</td><td class=\"templatesName\"><a href=\"javascript:void(0)\" data-toggle=\"modal\" data-target=\"#rowDetailDynamic\" onclick=\"getDetailThreat('Incidence response failure','536')\" class=\"rowDetail-dynamic\" title=\"T:ThreatMatrix:536;Q:RowDetailThreatMatrix\"></td><td style=\"background: #E8FF00\">Medium</td><td style=\"background: #FFC900\">High</td><td style=\"background: #FFE404\">Medium</td></tr></tbody></table>").

I have these class to format this HTML tags as :

table.projectListTableCsm {
  table-layout: fixed;
}


table.table-dynamic {
  border: 1px solid #002060 !important;
}
.projectListTableCsm {
  border-radius: 5px;
  text-align: center;
}

These class has been store in style.css file in project structure.
So I don’t know how to apply these class to HTML tags.
Please help me to get solution.

Thanks,
Hanh.

tahir.manzoor · July 10, 2015, 4:01am

Hi Hanh,

Thanks for your inquiry. You can use InsertHtml to insert an HTML fragment or whole HTML document. In your case, I suggest you please use inline styling as shown below.

<h1 style="color:blue">This is a Blue Heading</h1>

You may also load the html fragment along with CSS into Aspose.Words.Document and insert this document into your main template document. Please check following code snippet for your kind reference.

Hope this helps you. Please let us know if you have any more queries.

string csshtml =
    @"<html>
        <head>
            <style type='text/css'>
                    .table-dynamic {  border: 1px solid #002060 !important; }
                    .projectListTableCsm {  border-radius: 5px; text-align: center;  }
            </style>
        </head>
        <body>
            <table class='table-dynamic table table-striped table-bordered resizable dataTable projectListTableCsm no-footer'>
            <thead>
                <tr>
                    <th class='templatesName' style='Width:5%'>T#</th>
                    <th class='templatesName' style='Width:35%'>Threat Name</th>
                    <th class='templatesName' style='Width:8%'>Probability</th>
                    <th class='templatesName' style='Width:8%'>Impact Scale</th>
                    <th class='templatesName' style='Width:8%'>
                        Risk
                        Scale
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='templatesName'>T1</td>
                    <td class='templatesName'>
                        <a href='javascript:void(0)' data-toggle='modal' data-target='#rowDetailDynamic'
                            onclick='getDetailThreat(' Incidence response failure','536')'
                            class='rowDetail-dynamic'
                            title='T:ThreatMatrix:536;Q:RowDetailThreatMatrix'>
                    </td>
                    <td style='background: #E8FF00'>
                        Medium
                    </td>
                    <td style='background:#FFC900'>
                        High
                    </td>
                    <td style='background:#FFE404'>
                        Medium
                    </td>
                </tr>
            </tbody>
        </table>";

// Get bytes from string
byte[] htmlBytes = Encoding.UTF8.GetBytes(csshtml);

// Create memory stream
MemoryStream htmlStream = new MemoryStream(htmlBytes);

Document htmlDoc = new Document(htmlStream, new LoadOptions(LoadFormat.Html, "", ""));

hanhnbfsoft · July 12, 2015, 11:18pm

Hi Tahir,

Thanks for your answer. But I can use InsertHtml method instead of use html stream as you used.
Because I’m using builder.insertHtml() method in my project right now.

Thanks,
Hanh.

tahir.manzoor · July 13, 2015, 3:20am

Hi Hanh,

Thanks for your inquiry. You are inserting html fragment into your document. So you can achieve the desired output by the two solutions shared in my previous post.

Use inline styling as shown below.

<h1 style="color:blue">This is a Blue Heading</h1>

load the html fragment along with CSS into Aspose.Words.Document and insert this document into your main template document.

hanhnbfsoft · July 21, 2015, 9:54pm

Hi Tahir,

Thanks for your answer. I just applied your code into my project. And Module run very fun.
But I have an issue as follow.
I have a table as :

<table style="table-layout: fixed; width: 100%">
  <tr>
    <td style="word-wrap: break-word">
      LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
    </td>
  </tr>
</table>

As You see content of cell very long. So when I export report this content overflow page. I tried to style this td with " word-wrap: break-word" to wrap text but this content not wrap text.
I don’t know How to fix issue.

Please help me to solution for this issue.
Thanks.

tahir.manzoor · July 22, 2015, 5:06am

Hi Hanh,

I have tested the scenario and have managed to reproduce the same issue at my side. For the sake of correction, I have logged this problem in our issue tracking system as WORDSNET-12150. I have linked this forum thread to the same issue and you will be notified via this forum thread once this issue is resolved. We apologize for your inconvenience.

As a workaround, please remove “width: 100%” from table’s style. Hope this helps you.

tahir.manzoor · September 16, 2015, 12:47pm

Hi Hanh,

Thanks for your patience. It is to inform you that our product team has completed the work on the issue (WORDSNET-12150)
and has come to a conclusion that this issue and the
undesired behavior you’re observing is actually not a bug in
Aspose.Words. So, we have closed this issue as ‘Not a Bug’. I am quoting developer’s comments here for your reference:

When table’s width is specified in percentages resulting width is calculated as “percentage value” * 50. Both MS Word and Aspose.Words do this.
Please remove “width: 100%” from table’s style to fix this issue.

PhilM67 · February 3, 2016, 6:09pm

Hi

I have a similar issue with css styles. I’m attempting to apply a “border-radius” to all images in a generated aspose words document. I’ve applied the style within the inserted image tag html but it appears to be ignored. Am I doing something wrong?

Regards

Phil

tahir.manzoor · February 4, 2016, 10:55am

Hi Phil,

Thanks for your inquiry. It would be great if you please share following detail for investigation purposes.

Please attach your input Word document and Html.
Pleasecreate a standalone/runnable simple application (for example a Console
Application Project) that demonstrates the code (Aspose.Words code) you used to generate your output document
Please attach the output Word file that shows the undesired behavior.
Please attach your target Word document showing the desired behavior. You can
use Microsoft Word to create your target Word document. We will investigate as to how you are expecting your final document be generated like.

Unfortunately,
it is difficult to say what the problem is without the Document(s) and
simplified application. We need your Document(s) and simple project to
reproduce the problem. As soon as you get these pieces of information to
us we’ll start our investigation into your issue.