search

OfficeDev / microsoft-teams-library-js

JavaScript library for use by Microsoft Teams apps
https://docs.microsoft.com/microsoftteams/platform/
Other
419 stars 192 forks source link

ThumbnailCard title does not allow text-overflow:ellipsis CSS rule #1645

Closed catmanjan closed 7 months ago

catmanjan commented 1 year ago

We have a ThumbnailCard with the following Title:

var card = new ThumbnailCard
{
    Title = $"<div style=\"text-overflow:ellipsis;font-weight:600;max-width:270px;overflow:hidden;white-space:nowrap;\">blah</div>"
};

This works, except for some reason teams is removing the text-overflow:ellipsis rule. All the other CSS rules remain as expected, see below:

image

ghost commented 1 year ago

Hi catmanjan! Thank you for bringing this issue to our attention. We will investigate and if we require further information we will reach out in one business day. Please use this link to escalate if you don't get replies.

Best regards, Teams Platform

Nivedipa-MSFT commented 1 year ago

@catmanjan - Thanks for reporting your issue. We will test this and update you soon.

Nivedipa-MSFT commented 1 year ago

@catmanjan - We are able to repro your issue. We have raised a bug for the same. We will let you know once we get any updates from them.

Nivedipa-MSFT commented 9 months ago

@catmanjan - We received an update from the engineering team stating that this is by design. We do not allow the complete set of CSS rules for enriching card content, including the title, subtitle, and text of thumbnail cards. Only a selected set of CSS rules is permitted, while the rest are removed.

Nivedipa-MSFT commented 9 months ago

@catmanjan - We are closing this issue for now. Please feel free to reopen if required.

microsoft-github-policy-service[bot] commented 9 months ago

Tell us about your experience!

Hi catmanjan! We have closed this issue in our system, but we would love to hear your feedback. To let us know how we did, simply use one of the following emoji icons: :thumbsup: for resolved, :thumbsdown: for unresolved, or :heart: for a great experience on this message. Please use the link for more detailed feedback.

Best regards, Teams Platform

catmanjan commented 9 months ago

@Nivedipa-MSFT how do I reopen this issue?

Where are the limitations regarding support CSS and HTML tags documented?

Nivedipa-MSFT commented 9 months ago

@catmanjan - We are checking this with engineering team, we will update you soon.

ChetanSharma-msft commented 7 months ago

Hello @catmanjan - Sorry for delay in response. Currently we don't have any specific documentation for exact CSS supported for cards and you can refer this doc for HTML: https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format?tabs=adaptive-md%2Cdesktop%2Cconnector-html#format-cards-with-html

We are checking it with engineering team to add/update the documentation, if required.

ChetanSharma-msft commented 7 months ago

Hello @catmanjan - We got an update from engineering team that we do not recommend relying on CSS for styling in cards. The supported attribute is documented here https://learn.microsoft.com/en-us/microsoftteams/platform/task-modules-and-cards/cards/cards-format

ChetanSharma-msft commented 7 months ago

We are closing this issue for now, please feel free to reopen it, if required.

microsoft-github-policy-service[bot] commented 7 months ago

Tell us about your experience!

Hi catmanjan! We have closed this issue in our system, but we would love to hear your feedback. To let us know how we did, simply use one of the following emoji icons: :thumbsup: for resolved, :thumbsdown: for unresolved, or :heart: for a great experience on this message. Please use the link for more detailed feedback.

Best regards, Teams Platform