Text box, chat app in Electron.js 10

- Andrés Cruz

En español
Text box, chat app in Electron.js 10

Previously we created the list of messages for the application, now we are going to create the text box, which is where we will place the messages, it will be made up of two columns, one of them with automatic size so that it occupies only the necessary size; in the fixed-size one, we place the TEXTAREA with the rounded corners:

<div class="col-8" id="right">
    *** CHATS
    <form action="" class="form-message">
        <div class="row">
            <div class="col">
                <textarea  class="form-control rounded-pill"></textarea>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary rounded-circle send-button">
                    <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 01-.923 1.785A5.969 5.969 0 006 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337z" />
                        </svg>
                        
                </button>
            </div>
        </div>
    </form>
</div>

And we will use the following CSS:

css/style.css

.form-message{
    margin-top: 15px;
}

.form-message button.send-button svg {
    width: 40px;
    height: 40px;
}
.form-message textarea{
   overflow: hidden;
   resize: none;
}

And we will have:

chat box
chat box

The next step to carry out is to create a generic list to go from the main process to the web page

Remember that the previous material is part of mi curso completo sobre Electron.js

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.