This is a migrated thread and some comments may be shown as answers.

HTML Export RichTextbox - padding for 'ul' and 'ol' tags - bug?

11 Answers 337 Views
RichTextBox
This is a migrated thread and some comments may be shown as answers.
Bernhard
Top achievements
Rank 1
Bernhard asked on 09 Oct 2013, 12:52 PM
Hello,

it seems that the HTML export of the RichTextBox forgets about the margin or padding indent.
No matter what margin/padding is chosen, the export html is always:

<ol start="1" style="list-style-type:decimal"><li value="1"><div style="padding-top: 0pt;padding-bottom: 0pt;text-indent: 0px;line-height: 1;"><span style="font-family: Calibri;font-size: 9pt;">

None of the highlighted styles are changed when changing the indent via the "Increase/Decrease Indent" buttons.

I thought maybe special html export settings (the recommended settings for exporting it to SSRS) would be the cause for that behaviour. But I also could reproduce it with your online demo.

Steps to reproduce in your demo (http://demos.telerik.com/silverlight/#RichTextBox/TelerikEditor):
1. Somewhere in the document insert a Bulleted or Numbered List
2. Click on "Increase Indent" (as often as you like)
3. Save document as html
4. Open document in browser - you will see that there is no indent
5. Open document in html editor - you will see that ol/ul  style description doesn't contain a margin or padding attribute.

Best regards,
Bernhard


11 Answers, 1 is accepted

Sort by
0
Mihail
Telerik team
answered on 11 Oct 2013, 11:45 AM
Hello Bernhard,

Could you give us more information on what is wrong? Is it the values of the padding that seems strange to you or the html is not show correctly somewhere?

Here is the result of a simple list example: 

<ol start="1" style="list-style-type: decimal">
    <li value="1">
        <p class="Normal p_2DC9BA0A"><span class="s_E2968D9D">first line</span></p>
    </li>
    <li style="list-style-type: none;">
        <ol start="1" style="list-style-type: lower-latin">
            <li value="1">
                <p class="Normal p_3A733CA9"><span class="s_E2968D9D">second line</span></p>
            </li>
        </ol>
    </li>
    <li value="2">
        <p class="Normal p_3A733CA9"><span class="s_E2968D9D">third line</span></p>
    </li>
</ol>


Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Bernhard
Top achievements
Rank 1
answered on 11 Oct 2013, 12:18 PM
Hello Mihail,

it's the fact that to me it seems that there is no way to get a user defined padding/margin value. That is what I meant with padding gets lost.

E.g. in your code I'm missing the margin (or padding) element (see first line):
<ol start="1" style="list-style-type: decimal; margin-left: 48px;"> <!-- or e.g. 'padding-left: 96px'-->
    <li value="1">
        <p class="Normal p_2DC9BA0A"><span class="s_E2968D9D">first line</span></p>
    </li>
    <li style="list-style-type: none;">
        <ol start="1" style="list-style-type: lower-latin">
            <li value="1">
                <p class="Normal p_3A733CA9"><span class="s_E2968D9D">second line</span></p>
            </li>
        </ol>
    </li>
    <li value="2">
        <p class="Normal p_3A733CA9"><span class="s_E2968D9D">third line</span></p>
    </li>
</ol>

Do you understand what I mean?

Best regards,
Bernhard
0
Mihail
Telerik team
answered on 16 Oct 2013, 10:26 AM
Hello Bernhard,

 If you want to import html documents with custom left indent you need to set it inline to the paragraph or in the paragraph style. Example: 

<ol start="1" style="list-style-type: decimal;"> <!-- or e.g. 'padding-left: 96px'-->
    <li value="1">
        <p class="Normal p_2DC9BA0A" style="margin-left: 150px;"><span class="s_E2968D9D">first line</span></p>
    </li>
    <li style="list-style-type: none;">
        <ol start="1" style="list-style-type: lower-latin">
            <li value="1">
                <p class="Normal p_3A733CA9"><span class="s_E2968D9D">second line</span></p>
            </li>
        </ol>
    </li>
    <li value="2">
        <p class="Normal p_3A733CA9"><span class="s_E2968D9D">third line</span></p>
    </li>
</ol>
If you want to specify the indent in the UI of RadRichTextBox you need to use the paragraph properties dialog. Alternatively you can set it using your custom code on each paragraph.

If you need more clarification or you have other questions feel free to contact us again.

Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Bernhard
Top achievements
Rank 1
answered on 18 Oct 2013, 08:38 AM

Hi Mihail,


yes, I want to specify the indent in the UI of the RadRichTextbox. I’ve used the “increase indent” and “decrease indent” buttons.
And now I see this is obviously a bug.
You gave me the advice to use the paragraph properties dialog. And with this it works. But if you try to increase the indent with the "increase ident" button (or the "decrase indent" btn) you will even see it in the paragraph properties dialog that the indent stays at 0.
Please see the attached screenshot for better understanding.

Regards,

Bernhard

0
Mihail
Telerik team
answered on 21 Oct 2013, 11:35 AM
Hello Bernhard,

I am unable to reproduce the problem. Please see the attached screenshot.
Could you verify whether the issue exists in our online demo: http://demos.telerik.com/silverlight/#RichTextBox/TelerikEditor?

Detailed steps on how we can reproduce the problem will be highly appreciated.

Looking forward to your reply. 

Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Bernhard
Top achievements
Rank 1
answered on 21 Oct 2013, 12:34 PM
Hi Mihail,

thanks for your response.
Ok, now I know why in my screenshot the paragraph properties dialog is showing a indent of 0.0 pt.
I've selected the whole text block, but you insted have selected the whole text block MINUS the last paragraph symbol (see attached screenshot indent.jpg - or for better understanding symbolNOTmarked.jpg/symbolMarked.jpg). Seems like another issue or is that an intended behavior?

I thought the buttons increase/decrease would behave wrong, but it seems it is "only" an export problem.
Have you tried to save your document as a html file?
You will see no indent information in the html file.
Please check the attached file mydemo.png - the result of the html export is as following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled</title><style type="text/css"> p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; } body { font-family: 'Verdana';font-style: Normal;font-weight: normal;font-size: 16px; } .Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; } .TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;border-collapse: collapse; } .p_2DC9BA0A { telerik-style-type: local;text-indent: 0px; } .p_3A733CA9 { telerik-style-type: local;margin-right: 0px;text-indent: 0px; } .p_FE01F23F { telerik-style-type: local;margin-right: 0px;margin-left: 96px; } .p_C380C89E { telerik-style-type: local;margin-right: 0px; } </style></head><body><ol start="1" style="list-style-type:decimal"><li value="1"><p class="Normal p_2DC9BA0A">First list item</p></li><li value="2"><p class="Normal p_3A733CA9">Second list item</p></li></ol><p class="Normal p_FE01F23F">No list item</p><p class="Normal p_C380C89E"><span>&nbsp;</span></p></body></html>




BR
Bernhard

0
Mihail
Telerik team
answered on 23 Oct 2013, 12:44 PM
Hello Bernhard,

 Thank you for the clarification. 
The paragraph properties dialog should show the correct numbers if the left indent is the same for all selected paragraphs. In the current case this is not happening and we can consider this issue a bug. 

Regarding the export to HTML, you are correct we do not export the indent as margin or padding, but rather as nested lists.

Hope this information is helpful for you. If you have further questions do not hesitate to contact us again.

Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Bernhard
Top achievements
Rank 1
answered on 23 Oct 2013, 02:49 PM
Hi Mihail,

"Regarding the export to HTML, you are correct we do not export the indent as margin or padding, but rather as nested lists."
Is there are special reason that you are not exporting the user defined margin/paddings? Or is it planned for future releases?

Concerning nested lists I already have another questions (sorry for making this thread so long), but have you noticed that you are generating too many list items?
I've created a sample in your demo editor. Please see the attached screenshot ("sample.png").
Based on this I've gotten the following html export:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled</title><style type="text/css">
p { margin-top: 0px;margin-bottom: 12px;line-height: 1.15; }
body { font-family: 'Verdana';font-style: Normal;font-weight: normal;font-size: 16px; }
.Normal { telerik-style-type: paragraph;telerik-style-name: Normal;border-collapse: collapse; }
.TableNormal { telerik-style-type: table;telerik-style-name: TableNormal;border-collapse: collapse; }
.p_3A733CA9 { telerik-style-type: local;margin-right: 0px;text-indent: 0px; }
.p_2DC9BA0A { telerik-style-type: local;text-indent: 0px; }
.p_C380C89E { telerik-style-type: local;margin-right: 0px; } </style></head><body><ul style="list-style-type:disc"><li value="1"><p class="Normal p_3A733CA9">Test1</p></li><li style="list-style-type: none;"><ul style="list-style-type:disc"><li value="1"><p class="Normal p_2DC9BA0A">Test2</p></li><li style="list-style-type: none;"><ul style="list-style-type:disc"><li value="1"><p class="Normal p_3A733CA9">Test3</p></li></ul></li></ul></li></ul><p class="Normal p_C380C89E"><span>&nbsp;</span></p></body></html>


Please have a look at the number of generated list items - attached file "highlightedcode.png".

Nevertheless Firefox and IE are somehow interpreting (ignoring?) this correctly, but in SSRS you get a result as showing in the attached file "ssrs.png."

BR
Bernhard
0
Mihail
Telerik team
answered on 25 Oct 2013, 01:35 PM
Hello Bernhard,

 We are aware of the number of generated list items. As you already point out, the major browsers are working identical and the shown result is expected. Unfortunately we can't guarantee that the html will be shown identical in all possible HTML viewers. Particular problem which may be noticed from your screenshots is that the SSRS is not respecting the "list-style-type: none;" styling of the list. Please take a look at the attached images, which are your screenshots with slight modifications.

Regarding the indent, it seems there is a bug when you define custom left intent of paragraph which is in list. Please take a look at the screenshots: ParagraphProperties, ResultInRadRichTextBox and ResultInBrowser. Is this the problem which you are talking about?

Looking forward to your reply.

Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
0
Bernhard
Top achievements
Rank 1
answered on 25 Oct 2013, 01:56 PM
Hi Mihail,

" Please take a look at the screenshots: ParagraphProperties, ResultInRadRichTextBox and ResultInBrowser. "

These screenshots are not attached to your post?!

But yes I think we are talking of the same issue! :-)


Concerning the "list-style-type: none;"  you are of course right. But to me it seemed that those additional invisible list items aren't necessary and therefore shouldn't be there?!
As you may know SSRS only supports are limited set of HTML tags and therefore the less (nested) html code the better.
So no chance to get a html code without those invisible list items?

Best regards,
Bernhard
0
Accepted
Mihail
Telerik team
answered on 28 Oct 2013, 12:21 PM
Hello Bernhard,

 Here are the screenshots, please excuse me for the inconvenience.

Regarding the nested lists in HTML format, at this point we do not plan to change the way how the lists are exported, nevertheless I will log your request to our to do list for future planning.

In appreciation for your involvement we have updated your Telerik points.

If you have further questions or comments feel free to contact us again. 

Regards,
Mihail
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
RichTextBox
Asked by
Bernhard
Top achievements
Rank 1
Answers by
Mihail
Telerik team
Bernhard
Top achievements
Rank 1
Share this question
or