CODEWITHSUNDEEP
javascriptcss
Dan
Dan

Reputation: 396

Issue with stretching of grid when grid gets generated below 16 rows

I am generating a grid on page load. When you generate a grid below 16 the grid gets stretched like this: https://i.sstatic.net/1IkXz.jpg

I have tried to adjust the width of the row with css. I have also made changes to the container with css. I believe this has something to do specifically with the width of the .row css which is set to 25.25% working codepen https://codepen.io/dhuang6/pen/ZVKWGe

       <!DOCTYPE html>
          <html>
            <head>
            <link rel="stylesheet" type="text/css" href="style.css">

            </head>
             <body>
               <div id="container">
                 <div id="Btns">
                   <button id="recreate" 
                     onclick="resizeGrid(this.value)">remake 
                           grid</button>
                 </div>
                        <br />
              </div>

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




       window.onload = function(){
          var createGrid = prompt("How many rows do you want?");
            for(i = 0; i <= createGrid; i++){
              var row = document.createElement('div');
                row.className = "row";
                row.id = "row" + i;

             for(k= 0; k <= createGrid; k++ ){
               var box = document.createElement('div');
                 box.className = "box";
                 row.appendChild(box);
            }
            container.appendChild(row);
        }
            return container;
    }


    #container {

      width: 50%;
      height: 50%;
      margin-top:50px;
      margin-left: auto;
      margin-right: auto;
      background: "white";
      overflow:hidden;
      box-sizing: border-box;
   }


   .row{
      border:1px solid red;
      height:1em;
      width:25.25%;
      overflow:hidden;
      box-sizing: border-box;

   }




   .box{
      display: inline-block;
      width: 8.25%;
      height: 1em;
      border: 1px solid red;
      border-bottom: 0px;
      border-left: 0px;
      float:right;
      overflow:hidden;
      box-sizing: border-box;
      margin: auto;
   }

When you inspect the element of the .row of the html the width is usually set to 265px or something really long like that. I believe that is part of the problem. When you generate a grid larger than 16 this issue doesn't occur.

Thank you for helping me.

Upvotes: 1

Views: 120

Answers (3)

k441i
k441i

Reputation: 31

Move the button to end of the page to make the first child selector work and apply this CSS

#container {
   width: 50%;
   height: 50%;
   margin-top:50px;
   margin-left: auto;
   margin-right: auto;
   background: "white";
   overflow:hidden;
   box-sizing: border-box;
}

.row{
   line-height: 0;
}

.row:first-child .box{
   border-top: 1px solid red;
}

.box{
   display: inline-block;
   width: 15px;
   height: 15px;
   border: 1px solid red;
   box-sizing: border-box;
   border-left: none;
   border-top: none;
   margin: 0;
}
.box:first-child{
   border-left: 1px solid red;
}

Upvotes: 1

Trobol
Trobol

Reputation: 1250

Here is a working version using a table instead of divs.

There are alot of css changes so make sure to look over the code carefully or copy it verbatim. Also because of the way tables work the grid is basically turned 90deg so keep that in mind.

//try flexbox
/*
adding a button and having the submit grab the value for the backend function

*/
//trying to make a function for creating divs
window.onload = function(){
  var createGrid = prompt("How many rows do you want?"),
  table = document.getElementById('table');
  console.log(createGrid);
  for(i = 0; i <= createGrid; i++){
    var row = document.createElement('tr'); //changed from div
      row.className = "row";
      row.id = "row" + i;
    
    for(k= 0; k <= createGrid; k++ ){
    var box = document.createElement('td'); //changed from div
      box.className = "box";
      row.appendChild(box);
    }
       table.appendChild(row); //changed from container.
  }
        return container;
}

//create a grid
//generates a grid with the original div container already on index.html you need to start messing with the code you work with to gain a better understanding of what it's doing
function grid() {
  var container = document.getElementById("container");
        for (i = 0; i <= 16; i++){
           
        
          
    
     for(k = 0; k <= 16; k ++){
          var box = document.createElement("div");
           box.className = "box";
         //    row.appendChild(box);
         
          }
           container.appendChild(row);
          }
           return container;
        }
         // grid(document.body);
            



function resizeGrid(){
  clearGrid();
  //missing a clear grid function!
}
  
  //right now the resizing is adding to the bottom of the old grid.
  function clearGrid(){
    
  }
  
  
document.addEventListener("mouseover",(e)=>{
  if(!e.target.classList.contains("box")){
      return;
  }
  e.target.style.background = "#3d3d3d";
})
/*
added the container that holds the grid to manipulate the css.
made it appear more like the etch-a-sketch board.

width: 25.25%;
*/


#container {
  
  width: 50%;
  height: 50%;
  margin-top:50px;
  margin-left: auto;
  margin-right: auto;
  background: "white";
  overflow:hidden;
  box-sizing: border-box;
}

#table {
  width: 100%;
  border-collapse: collapse;
}
/*

there is a bit of extra space being generated on the right side of the grid.
row seems to be causing the issue will need to review.
Checked the grid creation which seems to be fine.
*/
.row{
  border:1px solid red;
  height:1em;
  width:25.25%;
  overflow:hidden;
  box-sizing: border-box;
  
}


.box{
  width: 8.25%;
  height: 1em;
  border: 1px solid red;
  
  overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
  <div id="container">
    <div id="Btns">
      <button id="recreate" onclick="resizeGrid(this.value)">remake grid</button>
      </div>
    <br />
    </div>
   <table id="table"></table>
  <script src="script.js"></script>
</body>
</html>

Upvotes: 1

ic3b3rg
ic3b3rg

Reputation: 14927

You need to dynamically set the box width: https://codepen.io/brien-givens/pen/wRdGJa

Upvotes: 1

Related Questions