'My message box cuts off the last message in the list

I am very new to CSS.

I was working on this little chat site, but I noticed that the latest message was always missing. It seems my message box cuts off the last message but I can't fix it.

I tried changing the height value of the messages div but that didn't help.

So, this code gives you my HTML and the styling (in the <style> tag) but I really don't know what to do now. I don't want to resize the box or it'll look ugly.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        form {
            background: #000;
            padding: 3px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        form input {
            border: 0;
            padding: 10px;
            width: 90%;
            margin-right: 0.5%;
        }

        form button {
            width: 9%;
            background: rgb(130, 224, 255);
            border: none;
            padding: 10px;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages div {
            padding: 5px 10px;
        }

        #messages div:nth-child(odd) {
            background: #eee;
        }
    </style>

</head>

<body>
    <h1>Hi</h1>

    <form id="msgForm" action="">
        <input type="text" name="msg">
        <button>Send</button>
    </form>
    
    <input type="text" name="enter" class="enter" value="" id="lolz"/>

    <div id="messages">

    </div>
    <script defer>
        const socket = io("localhost:3000")
        const messages = document.getElementById('messages')
        const msgForm = document.getElementById('msgForm')

        const nick = document.getElementById('lolz')

        socket.on('message', (nick, msg) => {
            appendMessages(nick, msg)
        })
        socket.on('output-messages', data => {
            console.log(data)
            if (data.length) {
                data.forEach(message => {
                    appendMessages(message.nick, message.msg)
                })
            }
        })

        msgForm.addEventListener('submit', e => {
                e.preventDefault()
                if (msgForm && msgForm.msg && msgForm.msg.value && nick && nick.value) {
                    socket.emit('chatmessage', nick.value, msgForm.msg.value)
                }
                msgForm.msg.value = ''
        })

        function appendMessages(nick, message) {
            const html = `<div><strong>${nick}</strong>: ${message}</div>`
            messages.innerHTML += html
        }
    </script>
</body>
</html>

Here, you can see what it looks like: e: e (x2)

It's supposed to show this message:

"e: I hate this box!"

css


Solution 1:[1]

The problem is the position: fixed property for the form element.

Quoting from MDN

fixed

The element is removed from the normal document flow, and no space is created for the element in the page layout.

Basically it means that the element is in a different layer, so it will overlap the rest of the content on the page and can possibly hide elements under it.

What you want is position: sticky.

I suggest you to read more on the great MDN documentation site:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions