Adaptivecards: [MSTeams][AdaptiveCard] Adaptive Cards Carousel not displaying in Teams

Created on 5 Mar 2020  路  8Comments  路  Source: microsoft/AdaptiveCards

Platform

  • .Net Core
  • Bot Framework

Author or host

  • MsTeams

Hi,

I am using Bot framework V4 and I am sending the Adaptive card as a Carousel to Teams but sometimes teams is failing to load the adaptive carousel.

Note:- After waiting some time, the carousel is loading. properly.

Can you please help with the issue.

Please find the screenshot.

MainCarousel

Bug

All 8 comments

Hey @Chekrii ,
do you mind adding your card json for completion?

Pretty sure its easier for the guys to find out whats going on with some example.

@Chekrii
Your issue seems similar to #3315. Can you try to reduce the number of cards in the carousel, and see if it helps?

Hello @nesalang,

I am sending 4 cards in Carousel and still facing the same issue. when I logging to Teams and open the bot, the whole conversation with the bot is loading but not Carousel.

Please find the Adaptive card I am using.

{"type":"AdaptiveCard","version":"1.0","body":[{"type":"TextBlock","text":"","wrap":true},{"type":"TextBlock","text":"<Content of article>","wrap":true,"maxLines":4}],"$schema":"<a rel="nofollow noopener" target="_blank" href="http://adaptivecards.io/schemas/adaptive-card.json">http://adaptivecards.io/schemas/adaptive-card.json</a>","actions":[{"type":"Action.OpenUrl","title":"Read more","id":"","iconUrl":"","url":"<Url>"}]}</p> <p>I am replacing Title, Content, and Url at run time.</p> <p>Thanks.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/49824279?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Chekrii picture"> <strong>Chekrii</strong> <span class="text-muted ml-1">on 11 Mar 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@nesalang</strong> assigning to you for follow up here. Please see <strong>@Chekrii</strong> 's response above. Thanks!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/20822397?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="shalinijoshi19 picture"> <strong>shalinijoshi19</strong> <span class="text-muted ml-1">on 20 Mar 2020</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>We have acknowledged this issue report. Please continue to follow the issue for updates/progress/questions. <strong>@matthidinger</strong> / <strong>@dclaux</strong> / <strong>@rebeccaanne</strong> / <strong>@paulcam206</strong> / <strong>@nesalang</strong> / @almedina-ms FYI.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/in/26612?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="msftbot[bot] picture"> <strong>msftbot[bot]</strong> <span class="text-muted ml-1">on 20 Mar 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi All, Any update on this Issue or any workaround?<br /> Thanks.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/49824279?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Chekrii picture"> <strong>Chekrii</strong> <span class="text-muted ml-1">on 2 Apr 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi all,</p> <p>this is happening a lot these days for the carousel.<br /> After scrolling up and come to the carousel it is blank and takes a lot of time to load.<br /> my carousel is having 4 adaptive cards with 4 buttons each.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/49824279?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Chekrii picture"> <strong>Chekrii</strong> <span class="text-muted ml-1">on 4 Jun 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi <strong>@Chekrii</strong>,<br /> There was a fix on the Teams client for a similar bug for adaptive card carousel that was deployed in May, and it should have reached the public version of Teams. Can you confirm that this is still happening, or if the issue has been fixed? Thanks! </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/10697383?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="susanshen96 picture"> <strong>susanshen96</strong> <span class="text-muted ml-1">on 1 Aug 2020</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(576084401, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(576084401, 1);" onclick="rate(576084401, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(576084401, 2);" onclick="rate(576084401, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(576084401, 3);" onclick="rate(576084401, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(576084401, 4);" onclick="rate(576084401, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(576084401, 5);" onclick="rate(576084401, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/adaptivecards/686973993/javascript-empty-text-with-bold-markdown-shows-a-separator">[JavaScript]Empty text with bold markdown shows a separator</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/13940020?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="atishayv picture"> <strong class="pr-1" dir="ltr">atishayv</strong>  路  <span class="px-1" dir="ltr">4</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/adaptivecards/265346464/uwp-specifying-data-property-on-action-submit-as-a-string">[UWP] Specifying data property on Action.Submit as a string doesn't work</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/13246069?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="andrewleader picture"> <strong class="pr-1" dir="ltr">andrewleader</strong>  路  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/adaptivecards/710574387/ios-input-validation-error-ux-issue-input-view-styling-on">[iOS][input validation error] [UX issue : Input view styling on validation error]</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/72016168?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="jyoti-ms picture"> <strong class="pr-1" dir="ltr">jyoti-ms</strong>  路  <span class="px-1" dir="ltr">6</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/adaptivecards/601435051/net-html-accessibility-input-date-accessibility-issues">[.NET HTML][Accessibility] [Input.Date Accessibility Issues]</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars1.githubusercontent.com/u/58231579?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="murcinar picture"> <strong class="pr-1" dir="ltr">murcinar</strong>  路  <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/adaptivecards/230117733/html-renderer-doesn-t-implement-isrequired-for-inputs">HTML renderer doesn't implement isRequired for inputs</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/1676059?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="dsanvita picture"> <strong class="pr-1" dir="ltr">dsanvita</strong>  路  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/microsoft/AdaptiveCards/issues/3821" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> 漏 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>