CODEWITHSUNDEEP
javascripthtmlcss
Elliott1197
Elliott1197

Reputation: 89

how do I stop my grid from going outside its container div?

I have this interactive grid and when I hover over the cell it colors the inside divs background color but its is coloring past the container its in, how do I get it to only color inside the container? it seems to stop at the containers top and sides but the bottom can be colored downwards the whole page. This is my code 

***HTML**
<!DOCTYPE html>
<html>
    <head> 
         <title> Claudias Etch-A-Sketch</title>
         <link rel= "stylesheet"  href="style.css">     
    </head>


<body>
    <section class="back">
        <h1>
          <center> Claudia Etch-A-Sketch!</center>
        </h1>
      </section>
      <section>
        <center><div>
          <button class="Black">Black</button>
          <button class="Pink">Pink</button>
          <button class="Clear">Eraser</button>
        </div></center>
      </section>
      <section>
       <center><div id="container"> </div></center>
      </section>
</body>

<script src ="javascript.js"> </script>
</html>

**JAVASCRIPT**

const container = document.getElementById("container");
const btn = document.querySelector('button');


let y = document.querySelectorAll('button');
y.forEach(button => {
  button.addEventListener('click', () => {
    let choice = button.innerHTML;
    switch (choice) {
      case "Pink":
        random();
        break;
      case "Black":
        blackchange();
        break;
      case "Eraser":
        reset();
        break;
    }
  });
});

var currentMouseoverFunction = function() {};

function blackchange() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('pink');
    e.target.classList.remove('reset');
    e.target.classList.add('black');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function random() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('reset');
    e.target.classList.add('pink');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function reset() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('pink');
    e.target.classList.add('reset');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "griditem";
  };
};

makeRows(24, 24);

**CSS**

#container{

  width:500px;
  height:500px;
 margin-top: 30px;
 margin-bottom: 300px;
  background:#eee;
}

#container div {
 position: center;
 float:left;
 height: 35px;
 width: 35px
} 

.black {
  background: black;
}

.pink {
  background: pink;
}

.reset {
  background: transparent;
}

Upvotes: 1

Views: 2584

Answers (2)

isacvale
isacvale

Reputation: 647

Your code seems a little strange in that it uses some outdated solutions.

First, don't use <center>, it's obsolete. You should keep the appearance (including alignment) of your page inside the CSS.

Second, you don't have to use float (hardly ever). It is a common source of bugs like the one you're experiencing. Instead you could use flexbox, so your container would look like:

#container{
 display: flex; /* Puts all children inside a flexbox */
 flex-wrap: wrap; /* And allows the flexbox to span multiple lines */

 margin-top: 30px;
 margin-bottom: 300px;
 background:#eee;
}

Now, for the children, this solution allows them to distort slightly to adjust to the width of the parent:

.griditem {
 flex-basis: 35px; /* Set a base width */
 flex: 1; /* Allows it to stretch */

 height: 35px;
}

Flexbox will prove to be a very important tool in your toolset. Give it a go!

Edit: a simpler solution - sorry.

I'm usually so excited to tell people about flexbox that I sometimes overlook simpler solutions. As I see it, the reason you resorted to float is because you added a ton of divs and they stacked on top of each other - divs are "blocks" and blocks take up the hole line.

You could just have created them as spans, which as "inlines" concatenate one after the other (like letters) and do the line-break naturally. But then setting dimensions for them wouldn't work - they take their width from their content.

The simpler solution by far would be to give the divs the rule display: inline-block. Now they'd have the right size, would be inline and wrap nicely.

But then you'd find there's a mysterious space separating the lines, which is not margin nor padding. That's actually whitespace between the divs. Ugh!

The easiest way to fix that is giving the container font-size: 0 - the space is there, it just doesn't take up... space.

Anyway, the css would look like:

#container{
 font-size: 0;

 margin-top: 30px;
 margin-bottom: 300px;
 background:#eee;
}

.griditem {
 display: inline-block;

 height: 35px;
 width: 35px;
}

Upvotes: 0

Aaron Plocharczyk
Aaron Plocharczyk

Reputation: 2840

The divs in #container are floated left with float:left; in the CSS. Float takes elements out of the normal layout of the page, so the #container's height doesn't expand with its content. To fix this, remove the explicit height:500px; height definition of #container, and add a clear element after the .griditem divs inside #container.

const container = document.getElementById("container");
const btn = document.querySelector('button');


let y = document.querySelectorAll('button');
y.forEach(button => {
  button.addEventListener('click', () => {
    let choice = button.innerHTML;
    switch (choice) {
      case "Pink":
        random();
        break;
      case "Black":
        blackchange();
        break;
      case "Eraser":
        reset();
        break;
    }
  });
});

var currentMouseoverFunction = function() {};

function blackchange() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('pink');
    e.target.classList.remove('reset');
    e.target.classList.add('black');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function random() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('reset');
    e.target.classList.add('pink');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function reset() {
  container.removeEventListener('mouseover', currentMouseoverFunction);
  currentMouseoverFunction = function(e) {
    e.target.classList.remove('black');
    e.target.classList.remove('pink');
    e.target.classList.add('reset');
  };
  container.addEventListener('mouseover', currentMouseoverFunction);
};

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    container.appendChild(cell).className = "griditem";
  };
  let cell = document.createElement("span");
  container.appendChild(cell).style.display = "block";
  cell.style.clear = "both";
};

makeRows(24, 24);
#container {
  width: 500px;
  margin-top: 30px;
  margin-bottom: 300px;
  background: #eee;
}

#container div {
  position: center;
  float: left;
  height: 35px;
  width: 35px
}

.black {
  background: black;
}

.pink {
  background: pink;
}

.reset {
  background: transparent;
}
<section class="back">
  <h1>
    <center> Claudia Etch-A-Sketch!</center>
  </h1>
</section>
<section>
  <center>
    <div>
      <button class="Black">Black</button>
      <button class="Pink">Pink</button>
      <button class="Clear">Eraser</button>
    </div>
  </center>
</section>
<section>
  <center>
    <div id="container"> </div>
  </center>
</section>

As a side note, your .griditem divs are 35px wide each, so you should make the #container 840px wide if you want this to be a 24x24 square grid.

Upvotes: 2

Related Questions