Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Why the thumbnailCard image has a extra margin-top: 0.8rem; style? #4659

Closed
CatherineLiyuankun opened this issue May 7, 2024 · 1 comment
Labels
bug Indicates an unexpected problem or an unintended behavior. needs-triage The issue has just been created and it has not been reviewed by the team.

Comments

@CatherineLiyuankun
Copy link

CatherineLiyuankun commented May 7, 2024

Github issues should be used for bugs and feature requests. Use Stack Overflow for general "how-to" questions.

Versions

What package version of the SDK are you using. 4.22.2
What nodejs version are you using v18.19.0
What browser version are you using Google Chrome Version 123.0.6312.124 (Official Build) (arm64)
What os are you using macOS 14.4.1 (23E224)

Describe the bug

thumbnailCard image has a extra margin-top: 0.8rem; style

To Reproduce

Steps to reproduce the behavior:

  1. Create a thumbnailCard
const {
  TeamsActivityHandler,
  CardFactory,
  TeamsInfo,
  MessageFactory,
} = require("botbuilder");

async function thumbnailCardResponse(action, teamsConfig) {
  const data = await action.data;
  const {
    coverImageUrl,
    subEntityId,
    contentTitle,
    contentSubtitle,
    contentUrl,
  } = data;
  const entityId = "entityId";
  const { id } = teamsConfig;
  const context = "xxxxxxx";

  const buttons = [
    {
      type: "openUrl",
      title: "Open in Teams",
      value: `https://teams.microsoft.com/l/entity/${id}/${entityId}?webUrl=${contentUrl || ""}&context=${context}`,
    },
    {
      type: "openUrl",
      title: "Open in Browser",
      value: contentUrl || "",
    },
  ];
  const images = [
    {
      url: coverImageUrl,
      alt: "Cover Image",
    },
  ];

  // create a Thumbnail Card
  const thumbnailCard = CardFactory.thumbnailCard(
    "",
    contentSubtitle || "",
    images,
    buttons,
  );

  thumbnailCard.content.subtitle = "";
  const attachment = {
    contentType: thumbnailCard.contentType,
    content: thumbnailCard.content,
    preview: thumbnailCard,
  };

  return {
    composeExtension: {
      type: "result",
      attachmentLayout: "list",
      attachments: [attachment],
    },
  };
}
  1. View the thumbnailCard on Teams
  2. The image of thumbnailCard has a extra margin-top: 0.8rem; style
image Screenshot 2024-05-07 at 11 10 03

Expected behavior

The title and image are aligned at the top.

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

@CatherineLiyuankun CatherineLiyuankun added bug Indicates an unexpected problem or an unintended behavior. needs-triage The issue has just been created and it has not been reviewed by the team. labels May 7, 2024
@tracyboehrer
Copy link
Member

BF SDK doesn't render the cards. This should be brought up with Teams.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Indicates an unexpected problem or an unintended behavior. needs-triage The issue has just been created and it has not been reviewed by the team.
Projects
None yet
Development

No branches or pull requests

2 participants