CODEWITHSUNDEEP
javascripthtmlcss
HDD
HDD

Reputation: 260

How to stop Text Overlapping Text Area

If entered message is too long then it overlap with the below text area in chat application

How to solve this issue. I have attached images also to make the problem clear.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <title>MongoChat</title>
    <style>
        #messages{height:300px;}
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3 col-sm-12">
            <h1 class="text-center">
                MongoChat
                <button id="clear" class="btn btn-danger">Clear</button>
            </h1>
            <div id="status"></div>
            <div id="chat">
                <input type="text" id="username" class="form-control" placeholder="Enter name...">
                <br>
                <div class="card">
                    <textarea id="messages" class="well card-block">

                    </textarea>
                </div>
                <br>
                <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

<script>
    (function(){
        var element = function(id){
            return document.getElementById(id);
        }

        // Get Elements
        var status = element('status');
        var messages = element('messages');
        var textarea = element('textarea');
        var username = element('username');
        var clearBtn = element('clear');

        // Set default status
        var statusDefault = status.textContent;

        var setStatus = function(s){
            // Set status
            status.textContent = s;

            if(s !== statusDefault){
                var delay = setTimeout(function(){
                    setStatus(statusDefault);
                }, 4000);
            }
        }

        // Connect to socket.io
        var socket = io.connect('http://127.0.0.1:4000');

        // Check for connection
        if(socket !== undefined){
            console.log('Connected to socket...');

            // Handle Output
            socket.on('output', function(data){
                //console.log(data);
                if(data.length){
                    for(var x = 0;x < data.length;x++){
                        // Build out message div
                        var message = document.createElement('div');
                        message.setAttribute('class', 'chat-message');
                        message.textContent = data[x].name+": "+data[x].message;
                        messages.appendChild(message);
                        messages.insertBefore(message, messages.firstChild);
                    }
                }
            });

            // Get Status From Server
            socket.on('status', function(data){
                // get message status
                setStatus((typeof data === 'object')? data.message : data);

                // If status is clear, clear text
                if(data.clear){
                    textarea.value = '';
                }
            });

            // Handle Input
            textarea.addEventListener('keydown', function(event){
                if(event.which === 13 && event.shiftKey == false){
                    // Emit to server input
                    socket.emit('input', {
                        name:username.value,
                        message:textarea.value
                    });

                    event.preventDefault();
                }
            })

            // Handle Chat Clear
            clearBtn.addEventListener('click', function(){
                socket.emit('clear');
            });

            // Clear Message
            socket.on('cleared', function(){
                messages.textContent = '';
            });
        }

    })();
</script>
</body>
</html>

server.js 

var mongo = require('mongodb').MongoClient;
var client = require('socket.io').listen(4000).sockets;

// Connect to mongo
mongo.connect('mongodb://127.0.0.1/mongochat', function(err, db){
    if(err){
        throw err;
    }

    console.log('MongoDB connected...');

    // Connect to Socket.io
    client.on('connection', function(socket){
        var chat = db.collection('chats');

        // Create function to send status
        sendStatus = function(s){
            socket.emit('status', s);
        }

        // Get chats from mongo collection
        chat.find().limit(100).sort({_id:1}).toArray(function(err, res){
            if(err){
                throw err;
            }

            // Emit the messages
            socket.emit('output', res);
        });

        // Handle input events
        socket.on('input', function(data){
            var name = data.name;
            var message = data.message;

            // Check for name and message
            if(name == '' || message == ''){
                // Send error status
                sendStatus('Please enter a name and message');
            } else {
                // Insert message
                chat.insert({name: name, message: message}, function(){
                    client.emit('output', [data]);

                    // Send status object
                    sendStatus({
                        message: 'Message sent',
                        clear: true
                    });
                });
            }
        });

        // Handle clear
        socket.on('clear', function(data){
            // Remove all chats from collection
            chat.remove({}, function(){
                // Emit cleared
                socket.emit('cleared');
            });
        });
    });
});

First look of my application

Now, I have entered the name and message

Now , message is displayed as i want( working correctly)

If i eneter a too long message then i overlaps the below textatarea

Upvotes: 0

Views: 4377

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16261

just set auto height to .card and overflow: auto; for scrolling

.card{
height:auto;
overflow: auto;

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6 offset-md-3 col-sm-12">
            <h1 class="text-center">
                MongoChat
                <button id="clear" class="btn btn-danger">Clear</button>
            </h1>
            <div id="status"></div>
            <div id="chat">
                <input type="text" id="username" class="form-control" placeholder="Enter name...">
                <br>
                <div class="card">
                    <textarea id="messages" class="well card-block">

                    </textarea>
                </div>
                <br>
                <textarea id="textarea" class="form-control" placeholder="Enter message..."></textarea>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

Muhammad Soliman
Muhammad Soliman

Reputation: 23876

Your problem is the height. you specified a fixed height for messages to be 300px

Better to change this to add divs instead of adding text inside textarea or to make height as auto but you have to handle scrollbars also in case it exceeds the page height. 

   <style>
        #messages{height:auto;}
    </style>

if you want to keep the height though to 300px you can add overflow too

The overflow specifies what should happen if the content overflows an height in your case. 

   <style>
        #messages{
          height:300px; 
          overflow: auto;
        }
    </style>

Upvotes: 1

Related Questions