How to adjust kendo chat element to be full width

[Reza]

Hi there,

 

In order to create a chat screen I need to adjust kendo chat to be full screen, how can I do that?

https://docs.telerik.com/aspnet-mvc/html-helpers/conversational-ui/chat/getting-started

 

Thanks

[Eyup]

Hi Reza,

 

Thank you for contacting us.

You can achieve this requirement using the following CSS rule:

        .k-chat {
          max-width: 100%;
        }

Here is a live sample I've prepared for you:
https://dojo.telerik.com/AtKlPMkG/5

And the Chat takes all the available width:

Do you find this info beneficial? Let me know what you think.

 

Regards,
Eyup
Progress Telerik

[Reza]

Hi Eyup,

Thank you for your response! It worked great. Could you also help me figure out how to adjust the input text button to multiline mode with a scrollbar?

Thank you,
Reza

[Reza]

There isn’t a built-in feature to make the Kendo Chat input text element full width at this time. As a workaround, I hid the message box section and placed a Kendo TextArea and Kendo Upload elements behind it separately.

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

    .k-chat {
        max-width: 100%;
    }

    .k-message-box {
        display: none;
    }
</style>

<div class="col-sm-12"> 
    <div id="chat"></div>
    <div id="chat-custom-editor">
        @(Html.Kendo().TextArea().Name("chat-textarea").Rows(5).HtmlAttributes(new { style = "width: 100%;", @class = "col-sm-12" }))
        @(Html.Kendo().Upload().Name("chat-user-files").Validation(validation => validation.AllowedExtensions(allowedExtensions.ToArray())).HtmlAttributes(new { aria_label = "files" }))
        @(Html.Kendo().Button().Name("chat-send-button").Icon("paper-plane"))
    </div>    
</div>

$(document).ready(function () {

    var chat;

    function initializeChat() {
        chat = $("#chat").kendoChat({
            user: {
                id: 1,
                name: 'User',
                iconUrl: '@Url.Content("~/Content/Images/user.png")'
            },
            post: function (args) {
                sendMessage(args.text, true);
            }
        }).data("kendoChat");

        if (!chat) {
            console.error("Failed to initialize chat widget");
            return;
        }
    }

    initializeChat();

    function sendMessage(text) {
        //any logic or api call here
        chat.renderMessage({
            type: "text",
            text: text,
            timestamp: new Date()
        }, chat.getUser());
        //or
        chat.renderMessage({
            type: "text",
            text: text,
            timestamp: new Date()
        }, {
            id: 2,
            name: "Robot",
            iconUrl: '@Url.Content("~/Content/Images/bot.png")'
        });
    }

    $("#chat-send-button").click(function () {
        sendMessage($("#chat-textarea").val());
    });


});

[Eyup]

This is a nice approach.

Thank you for sharing it with our community!