Incorrect positioning of text with HTML formatting

Posted by: aresto on 15 December 2021, 2:16 am EST

  • Posted 15 December 2021, 2:16 am EST

    I'm currently working on creating a report that is processed in C# then sent over to the browser to be viewed in the active report view client.

    The problem I'm facing is happening with Rich Textboxes. Previously, we were using selection ranges but those have been deprecated. Selection ranges still have some functionality and work as expected, but we will not be using them any longer. Attempting to bold and highlight individual ranges of text is not working with this process like it did with the selection range. Trying to wrap a range of text in a span tag styled to bold and set the background of the range to yellow starts to overlap the neighboring text making some letters from the neighboring text completely unreadable. I have tried various things to get around this, but I'm mostly fighting with how Active Reports tries to render these things which I'm hoping there's a better solution.

    Has anyone run into this same problem and seen a reasonable solution for it? At the moment I may have to stick with double wrapping the highlighted span with another span that adds additional, non highlighted, space around it. The only issue with this is that the spacing required to achieve a clean boundary is context dependent, causing a lot of unnecessary overhead in logic and processing, since the left and right overlap of selected text is not a static amount.

    Thank you,
  • Replied 15 December 2021, 2:30 am EST

    Quick correction here: using selections also caused this behavior in the HMTL viewer - but wasn't happening the C# viewer.
  • Replied 22 December 2021, 10:08 pm EST

    Hello ,

    could you please attach the sample of html markup?

    Thanks,
    Sergey Romanov.
  • Replied 27 December 2021, 6:29 am EST

    We tested a lot of different setups to reduce the issue but we were unable to find a simple solution that did actually work. Another colleague found similar results working on a different report. It actually seemed to happen with every tag we tried that had a little bit of styling. Even just a strong tag.

    I found that using RTF encoding the results were better, but the letter spacing was still incorrect - and wasn't a viable option as the font information was not retained in render.

    Thanks,


    htmlformatsnippet.zip
  • Replied 27 December 2021, 7:04 pm EST

    Hello ,

    thank you for the sample. i have attached the screenshot of preview in JSViewer and it looks correct for me. i am using v15.2



    Thanks,
    Sergey Romanov.
  • Replied 29 June 2022, 10:02 am EST

    Hello, sorry I took a bit to respond - we're still running into the same problem.

    I upgraded to 16.1, including the npm module, and still saw the same formatting errors. I tried out version 15.2.0 as well and there was still issues with it - the same issues. In fact, there was a regression of sorts upgrading to different versions where data was missing from what was working before. Did you use the Html property for a rich textbox during the format event?

    We currently update the Html property of the RichTextbox element during the format event.

    Thanks,
  • Replied 3 July 2022, 4:33 pm EST

    Hi Andrew,

    Unfortunately, I was unable to replicate this behavior on my end.
    For testing this I created a simple code based section report with RichTextBox and loaded the HTML you have attached in a previous reply. Then I loaded the report in our JSViewer MVC Sample(https://github.com/activereports/WebSamples16/tree/main/JsViewerSamples/JSViewer_MVC), after upgrading the sample to ActiveReports 16.1.2. I have attached the sample along with this reply.


    Please share a runnable sample replicating the error or edit the attached sample such that it reproduces the behavior and send it back to us for further investigation.

    HTMLTestJSViewer.zip
  • Marked as Answer

    Replied 20 July 2022, 4:42 am EST

    Thank you for the help. Looks like we got it solved. Given that you've created a working version I figured I'd make my own report viewer project from scratch with the exact same report with the exact same data and found that it was working (however it doesn't handle newlines in html and I had to write code to fix that much). But I did get a working version nevertheless.

    So the problem was with our React setup. Each page gets wrapped in a tree, and in that tree a CSSBaseline gets added to each page - somehow it was interfering with the report viewer layout. It may have had something to do with the inherited styles inheriting a bad box-sizing model, but we ended up just removing the baseline for whenever we hit the report viewer url. The library that happened to cause this issue was Mui.

    Thanks again!
  • Replied 20 July 2022, 7:06 pm EST

    Hi Andrew,

    Happy to know that you were able to figure out the problem and resolve it! Also, thanks for sharing the solution with us, it will help others who may be experiencing a similar problem.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels