Question

我正在尝试使用css grid和javascript在android上制作一个用于chrome的webapp。在我的应用程序中，我从一个json文件加载一堆产品，并将它们添加到一个包装类，然后将其添加到我的网格div中。这有两个主要问题。第一个是当我将包装器max-width设置为100vw时，它延伸到设计的边界之外（在右侧）。如果我没有设置最大宽度，设计将扩展到适合所有产品（远离屏幕）。如何使用带滚动条的单元格设计css网格，或者如何停止内容以扩展其单元格的宽度？

第二个问题是产品在智能手机上以某种方式被拼写错误。我甚至不能说出问题似乎是什么。可能宽度未正确调整。可能没有正确计算字体大小。我迷失了，希望你们中的某个人知道答案。

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>

感谢您的时间。

CSS网格：使用滚动条

0 个答案: