1

I am trying to make a webapp for chrome on android with css grid and javascript. In my app I load a bunch of products from a json file and add them to a wrapper class which is then added to my grid div. There are two major problems with this. The first one is that when I set the wrappers max-width to 100vw it extended beyond the border of the design (on the right). If I not set the max-width the design is expanded to fit all products (well outside of the screen). enter image description here How do I design a css grid with one cell with a scrollbar or how do I stop the content to expand the width of its cell?

The second problem is that the products are somehow scrabbled on the smartphone. I can’t even really say what the problem seems to be. Maybe the width is not correctly adjusted. Maybe the font-size is not correctly calculated. I am lost and hoping that someone of you knows the answer. enter image description here

function generateList(array) {
  var wrapper = document.createElement('div');
  wrapper.className = "wrapper";

  for (var i = 0; i < array.length; i++) {
    var product = array[i];
    var temp = document.getElementById("product");
    var item = temp.cloneNode(true);
    item.getElementsByClassName("Pos")[0].innerHTML = product.Pos;
    item.getElementsByClassName("Artikel")[0].innerHTML = product.Artikel;
    item.getElementsByClassName("Bezeichnung")[0].innerHTML = product.Bezeichnung;
    item.getElementsByClassName("Menge")[0].innerHTML = product.Menge;
    item.getElementsByClassName("Lagerplatz")[0].innerHTML = product.Lagerplatz;
    wrapper.appendChild(item);
  }

  return wrapper;
}
.hide {
  display: none;
}

.mainGrid {
  display: grid;
  background-color: #555555;
  grid-template-rows: auto 1fr auto;
}

.head {
  font-size: 30px;
  padding-left: 10px;
}

.product {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  padding: 5px;
  border-style: solid;
}

.wrapper {
  display: flex;
  background-color: #2c3e50;
  /* min-height: 200px; */
  max-width: 100vw;
  overflow-x: scroll;
}
<!DOCTYPE html>
<html>

<head>
  <title>test CSS Grid</title>
  <link media="all" type="text/css" rel="stylesheet" href="index.css">
  <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="scripts.js"></script>
  <div class="hide">
    <div id="product" class="product">
      <div>Pos: </div>
      <div class="Pos">test1</div>
      <div>Artikel: </div>
      <div class="Artikel">test2</div>
      <div>Bezeichnung: </div>
      <div class="Bezeichnung">test3</div>
      <div>Menge: </div>
      <div class="Menge">test4</div>
      <div>Lagerplatz:</div>
      <div class="Lagerplatz">test6</div>
    </div>
  </div>
</head>

<body>
  <div class="mainGrid">
    <div class="head"><b>title</b></div>
    <div id="grid"></div>
    <div>
      <button type="button" onclick="loadProducts('products.json', 'grid')"> load products</button> barcode:
      <input type="text" id="barcodeInput" oninput="barcodeEntered()" autofocus>
      <button type="button" onclick="clearBarcodeInput()"> clear barcode</button>
    </div>
  </div>
</body>

</html>

Thanks for your time.

Takit Isy
  • 9,688
  • 3
  • 23
  • 47
b.holz
  • 237
  • 3
  • 17
  • How many columns do you have in the table? And why don't use table? Anyway something like this https://jsfiddle.net/4neh3khv/7/ ? – Germano Plebani Mar 20 '18 at 08:56
  • the grid has 1 column but the wrapper has after the element are added 20. I use grid because my boss wants it. – b.holz Mar 20 '18 at 09:05
  • 20 elements in a row? what should be the behavior in a smartphone? They are too many to not go outside the screen. – Germano Plebani Mar 20 '18 at 09:09
  • the behaviour should be that you see at least one of them and swipe/scroll to see the others. the app is also intented to run in landscape mode. – b.holz Mar 20 '18 at 09:12
  • With media query you can change the behaviour. On large screen in a row and in small screen they displayed in column: https://jsfiddle.net/4neh3khv/11/ – Germano Plebani Mar 20 '18 at 09:28
  • If you could make a pen, fiddle or snippet that actually shows the problem, that would be really helpful (give us the final html with already some products in the grid otherwise we can't see the problem, if you don't know where to get the final html just go to your browser page and right click -> see page source). – Touniouk Mar 20 '18 at 09:30
  • the page source only gives me the unmodifed html even after I load the products. – b.holz Mar 20 '18 at 09:46

0 Answers0