Issue: Adaptive card input element height mismatch in webchat [Bot Framework]

[Lancelot301]

I have a question

Hi , I am Trying to create an Adaptive card with two input fields one is a date and another one is choiceSet, It is working fine in designer like this:

but in webchat there is a mismatch in height of both the element. Can we explicitly set the height of input element? If yes then how?

Any suggestions or reference would be very helpful

Thanks in Advance!

[stevkan]

@Lancelot301 - Thank you for alerting us to this peculiarity. I will mark this for review for a potential fix in a future release.

In the meantime, the easiest fix is to adjust the height of the date input field via the hosting page's CSS. You can target it either by its id property (you can assign the id, if missing) or by its named class, ac-dateInput:

{
  "type": "Input.Date",
  "id": "dueDate",
}

<style>
    html,
    body {
      height: 100%;
    }

    [ ... ]

    .ac-dateInput {
      height: 41px;
    }

    // OR

    #dueDate {
      height: 41px
    }
</style>

The height value of 41px for the date input matches the height value of the choiceSet input.

[stevkan]

@compulim - I'm unsure if the heights of the various fields are initially controlled/set by Web Chat during load (for uniformity, appearance, etc.). Or, if rendering is left wholly to the Adaptive Cards library and the above issue is simply the result of its own rendering process.

If you could provide your thoughts on this (and then handle the issue as you will), that would be great.

[Lancelot301]

Thanks for the suggestion but I am using bot framework in C# and I am not using any hosting page. So can you please tell me how can I do so using C# only?

[johnataylor]

@Lancelot301 can you clarify your scenario. Are using Webchat on your own web page?