Azure / api-management-developer-portal

Developer portal provided by the Azure API Management service.
MIT License
488 stars 318 forks source link

External CSS styles not applied #1602

Closed ZarTrox closed 2 years ago

ZarTrox commented 2 years ago

Bug description

When styling the frontend of an api operation/the operation details we use an external CSS file which is located in a blobstorage. But even simple styles are not applied. Meanwhile inline css is possible. For example:

This code... <head> <link rel="stylesheet" type="text/css" href="https://********.blob.core.windows.net/publicmedia/DevPortal_styles.css" /> </head> <body> <p class="test">Test if the css style is applied</p> </body>

with... .test { color: red; } ...in the css file does not turn the text red.

image

Other style options are also affected.

Reproduction steps

  1. Create an operation in an API
  2. Create html with classes in the frontend editor
  3. Create external stylesheet with matching classes & styles
  4. Reference stylesheet
  5. Check in DevPortal to see if styles have been applied

Is your portal managed or self-hosted?

Managed

Additional context

May correlate with #1540 . Is there an update/is the fix currently rolling out?

ghost commented 2 years ago

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

azaslonov commented 2 years ago

@ZarTrox, this filtering of the HTML happens by design, and support of HTML in description fields comes from the days of the legacy portal. The problem we are trying to avoid here is a conflict of custom HTML/CSS/JS with the developer portal code base. Basically, if you use your own styles/classes, we can't guarantee that we don't break those with our own CSS when we release a new version of the portal.

However, we do understand the problem you're trying to solve, and working on enabling styling of sub-components, so that you'd be able to style practically every element of "Operation details" and other widgets. This, I believe, should address most of the customization questions.

Hope that makes sense.