CODEWITHSUNDEEP
botframeworkadaptive-cards
Bill Ryan
Bill Ryan

Reputation: 1

My buttons don't align in Emulator, browser or any other channel

I'm writing a bot and making heavy use of HeroCards and Adaptive Cards.

When I use the Adaptive Card Builder, the buttons always line up horizontally which is what I need. Once deployed, they always end up stacking on top of each other vertically.

This creates a huge problem especially in cases where pressing the button launches an action like opening a set of radio buttons of a textbox that asks for user input: the box will appear at the bottom (or whatever controls).

Outside of looking bad, the functionality gets confusing b/c users may think they are answering the wrong item.

Here are two examples:

How it should look and does look in the designer:
Correct

Here's what they look like in the channel: Shifted Horiztonally-Can't really see usability issue until next image

Also, I'm just curious, the purple buttons on the Q&A builder, are those just traditional buttons or are those called something special? I was using it at first, but then moved to LUIS which doesn't seem to drive the difference, but just as a FYI, I want the same buttons to line vertically, this is the result of what happens (compared to item 1):
Horizontal that interferes with usability

I have the code, but I think it's something in the frame or was thinking it was the emulator, but even when I go to the bing channel (seems to render only in Edge but I think it's b/c of Ghostery with Chrome).

Is it the container, b/c the code in the builder always looks right?

And sorry to be redundant, but on the Q&A, if someone can tell me if the purple buttons have a equivalent in cards in Bot Framework and they are just styled or if it's specific to Q&A I'd be very grateful.

Glad to post the code is it'd be helpful, but I'm stumped.

Confusing and looks bad - worst of both worlds

Upvotes: 0

Views: 235

Answers (1)

Mick
Mick

Reputation: 3024

In order to achieve the purple buttons, you'll have to style the WebChat component yourself. The BotFramework-WebChat README on Github describes how to achieve this. You can easily style the buttons with CSS, to achieve your own look and feel.

The vertically lined buttons look like a HeroCard with buttons, however I am not 100% sure. The look and feel of an Adaptive Card can differ between multiple channels at the moment, since it isn't really mature yet. However this can also be styled.

Upvotes: 1

Related Questions