Html - How do I get rid of these white boxes left and right of the container?

eliasant
May 4, 2023
311 views
0 votes
2 Answers

So I have this WebSocket Chat and I get these white boxes left and right to it if I apply a background-color to it. How do I get rid of them? I have had this problem with a few of my pages…

I tried adding a background-color to the html, body and also container tag but they still stay white. Maybe it has something to do with bootstrap?

Here is the code:

Chat.ejs:

<div class="container">
    <h1 class="text-center mb-4">WebSocket Chat</h1>
    <div class="input-group mb-3">
        <input id="name" type="text" class="form-control" placeholder="Enter your name" value=""/>
        <button class="btn btn-primary" type="button" onclick="saveName()"> Set Name </button>
    </div>
    <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <div class="row btn-container">
        <div class="col-md-12">
            <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
    </div>
</div>

CSS:

html, body{
    background-color: #222531;
}

.container {
    background-color: #222531;
    width: 100%;
    margin-top: 50px;
    color: white;

}

.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

/* Chat styles */
.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
    /*border-radius: 5px;*/
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

Here is a link to see it live in action: JSFiddle Snippet

Answers

The background-color doesn’t change because you’re including the bootstra.css styles that overwrite yours. So there are three options:

Use !important (NOT recommended!)
Use a "more specific" CSS-Selector (i.e., div.myClass is more specific than .myClass). However, this is not that applicable here.
Your best choice: Use another wrapping container around your "div-container".

Edit

Also note, that you can see that yourself when using the Debugger tools of your browser. The following image shows an example where you can see, that your styles are overwritten by something.

const ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  console.log('websocket is connected ...')
  ws.send('connected')
}
ws.onmessage = function(ev) {
  console.log(ev);
  addTextMessage(ev.data);
}

function sendMyMessage() {
  let text = document.getElementById("text").value;
  ws.send(text);
  // Clear the input field
  document.getElementById("text").value = "";
}

function addTextMessage(message) {
  const tag = document.createElement("div");
  tag.classList.add("message");
  const username = localStorage.getItem("username");
  const text = document.createTextNode(
    username ? `${username}: ${message}` : message
  );
  tag.appendChild(text);
  const element = document.getElementById("messages");
  element.appendChild(tag);
}

function saveName() {
  const name = document.getElementById("name").value;
  if (typeof window !== 'undefined') {
    localStorage.setItem("username", name);
  }
}

const input = document.getElementById("text");
input.addEventListener("keypress", function(event) {
  if (event.key == "Enter") {
    console.log('enter pressed');
    event.preventDefault();
    sendMyMessage();
  }
});

html,
body {
  background-color: #222531;
}

.wrapper {
  background-color: #222531;
}

.container {
  background-color: #222531;
  width: 100%;
  margin-top: 50px;
  color: white;
}

.form-control {
  background-color: #2e3440;
  color: white;
  border-color: #4c566a;
}

.btn-primary {
  background-color: #81a1c1;
  border-color: #81a1c1;
}

.btn-primary:hover {
  background-color: #5e81ac;
  border-color: #5e81ac;
}


/* Chat styles */

.message {
  background-color: white;
  color: #222531;
  padding-left: 10px;
  /*border-radius: 5px;*/
}

.message:last-of-type {
  margin-bottom: 0;
}

a {
  width: 100%;
  position: relative;
  margin-top: 30%;
}

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>WebSocket Chat</title>
  <!-- Add Bootstrap CSS -->
  <link href="/css/chat.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <!-- ADDED -->
    <div class="container">
      <h1 class="text-center mb-4">WebSocket Chat</h1>
      <div class="input-group mb-3">
        <input id="name" type="text" class="form-control" placeholder="Enter your name" value="" />
        <button class="btn btn-primary" type="button" onclick="saveName()">
            Set Name
        </button>
      </div>
      <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
      </div>
      <div id="messages"></div>
      <div class="row btn-container">
        <div class="col-md-12">
          <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
      </div>
    </div>
  </div>
  <!-- ADDED -->
  <!-- Add Bootstrap JS (required for some components to work) -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-1ZaXMtZwzTQcn+E3r/3b9MFsN/0oV7NcM1CbdKjzAsZcdYBv7zBkaP8fDPQjgsmh" crossorigin="anonymous"></script>
</body>

</html>

You are using .container which is adding a max-width:960px and your background colour is white, creating the two white strips either side.

You have two options:

You can either change .container to .container-fluid, which will make it the full width of the page.
Or add a main wrapper to control the background colour of that section and then set the container within that to keep the same width.

const ws = new WebSocket('ws://localhost:8080');
        ws.onopen = function () {
            console.log('websocket is connected ...')
            ws.send('connected')
        }
        ws.onmessage = function (ev) {
            console.log(ev);
            addTextMessage(ev.data);
        }
        function sendMyMessage() {
            let text = document.getElementById("text").value;
            ws.send(text);
            // Clear the input field
            document.getElementById("text").value = "";
        }

        function addTextMessage(message) {
            const tag = document.createElement("div");
            tag.classList.add("message");
            const username = localStorage.getItem("username");
            const text = document.createTextNode(
                username ? `${username}: ${message}` : message
            );
            tag.appendChild(text);
            const element = document.getElementById("messages");
            element.appendChild(tag);
        }

        function saveName() {
            const name = document.getElementById("name").value;
            if (typeof window !== 'undefined') {
                localStorage.setItem("username", name);
            }
        }

        const input = document.getElementById("text");
        input.addEventListener("keypress", function(event) {
            if (event.key == "Enter") {
                console.log('enter pressed');
                event.preventDefault();
                sendMyMessage();
            }
        });

html, body{
    background-color: #222531;
}

.main-wrapper {
    background-color: #222531;
    width: 100%;
    margin-top: 50px;
    color: white;

}

.form-control {
    background-color: #2e3440;
    color: white;
    border-color: #4c566a;
}

.btn-primary {
    background-color: #81a1c1;
    border-color: #81a1c1;
}

.btn-primary:hover {
    background-color: #5e81ac;
    border-color: #5e81ac;
}

/* Chat styles */
.message {
    background-color: white;
    color: #222531;
    padding-left: 10px;
    /*border-radius: 5px;*/
}

.message:last-of-type {
    margin-bottom: 0;
}

a {
    width: 100%;
    position:relative;
    margin-top: 30%;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>WebSocket Chat</title>
    <!-- Add Bootstrap CSS -->
    <link href="/css/chat.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<div class="main-wrapper">


<div class="container ">
    <h1 class="text-center mb-4">WebSocket Chat</h1>
    <div class="input-group mb-3">
        <input
                id="name"
                type="text"
                class="form-control"
                placeholder="Enter your name"
                value=""
        />
        <button class="btn btn-primary" type="button" onclick="saveName()">
            Set Name
        </button>
    </div>
    <div class="input-group mb-3">
        <input id="text" type="text" class="form-control" placeholder="Enter your message">
        <button class="btn btn-primary" type="button" onclick="sendMyMessage()">Send</button>
    </div>
    <div id="messages"></div>
    <div class="row btn-container">
        <div class="col-md-12">
            <a class="btn btn-secondary" href="/">Go back to the start page</a>
        </div>
    </div>
</div>
</div>
<!-- Add Bootstrap JS (required for some components to work) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-1ZaXMtZwzTQcn+E3r/3b9MFsN/0oV7NcM1CbdKjzAsZcdYBv7zBkaP8fDPQjgsmh" crossorigin="anonymous"></script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I get rid of these white boxes left and right of the container?

Answers

Edit