api-management-developer-portal icon indicating copy to clipboard operation
api-management-developer-portal copied to clipboard

API Products - heavily truncated product description with html tags

Open ZarTrox opened this issue 2 years ago • 4 comments

Bug description

We noticed that our API Product descriptions are heavily truncated for certain products: image

After some investigation, we concluded, that it might be due to html tags used in the description.

  • Without </br> tags more text is shown, but it is still heavily truncated.

  • Removing unordered list tags (with list items) shows almost all of the Product description

  • Removing even hyperlink <a> tags from the description results in this:

    image

To provide the best description of our products to our customers we rely on using lists, breaks and more html tags. Truncating the text heavily to the extend that on the Products page users cannot even get a short description, and having to navigate to the product itself to read the description, is bad behavior.

Reproduction steps

  1. Create a text with html tags as Product description
  2. Check its behavior in the Portal
  3. Compare to text of similar length without html tags
  4. See issue

Expected behavior

  • Clear communication of truncation rules
  • logical truncation of text (3 word descriptions are not enough)
  • When e.g. lists are not able to be displayed in the preview, then atleast show sufficient text that is before it

Is your portal managed or self-hosted?

Managed

ZarTrox avatar Jul 26 '23 10:07 ZarTrox

@ZarTrox, thank you for opening this issue. We will triage it within the next few business days.

ghost avatar Jul 26 '23 10:07 ghost

Widget: List of products

ZarTrox avatar Jul 26 '23 11:07 ZarTrox

Hello @ZarTrox , thank you for reaching out. I am not able to reproduce the issue you are describing: I added this description for a product:

<b style="color:pink;">Subscribers have completely unlimited access to the API. Administrator approval is required.</b> </br><br>
<a href="https://contoo.com">this is a link ok</a>
<ol>
<li> test </li>
<li> test2 </li>
</ol>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem dolor sed viverra ipsum nunc aliquet. Sed vulputate mi sit amet mauris commodo quis imperdiet. Consectetur adipiscing elit ut aliquam purus. Dignissim sodales ut eu sem integer vitae justo eget magna. Justo eget magna fermentum iaculis eu non diam phasellus. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Risus in hendrerit gravida rutrum quisque non tellus orci. Tristique senectus et netus et. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Justo laoreet sit amet cursus.

And it seems to be displayed ok: image

Jut to clarify the behavior, the truncation should happen at 250 characters.

could you please share one description that gets so heavily truncated as it does in your screenshot?

malincrist avatar Jul 28 '23 10:07 malincrist

String:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata s</br></br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, se<ul><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam non</li><li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</li> <li>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt</li></ul>Lorem ipsum dolor<a href="">Lorem &amp; ipsum dolor</a>.

Rendering: image

Do you need more information? The lorem ipsum is exactly as long as the original text.

ZarTrox avatar Aug 01 '23 09:08 ZarTrox

This issue is related to managed developer portal. We advise you to create a Azure support request to get assistance on this issue. Please refer to the below link to create a new Azure support request, Please select Problem Type = "Developer Portal" in the request to route it appropriately.

https://learn.microsoft.com/en-us/azure/azure-portal/supportability/how-to-create-azure-support-request

mrcarlosdev avatar Mar 29 '24 17:03 mrcarlosdev