CSS элементы сетки выходят из сетки с <input>с, но работают правильно с <div>с - PullRequest
Новая
       3

CSS элементы сетки выходят из сетки с <input>с, но работают правильно с <div>с

0 голосов
/ 20 января 2020

Я работаю над проектом, в котором мне нужно отобразить динамическую таблицу c. Dynami c как по количеству строк, так и по количеству столбцов. Я использую CSS сетку для таблицы. Моя проблема лучше всего демонстрируется с помощью этого кода: 

function add(type){
  var tmp = document.createElement(type)
  tmp.innerHTML='tmp'
	document.getElementById('place').insertAdjacentElement('afterend', tmp)
}

function addInput(){
  add('input')
}

function addDiv(){
  add('div')
}
 :root {
   --rowNum: 2;
   --colNum: 3;
 }
 
 .container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 40px;
 }

.table {
     grid-template-columns: 100px repeat(var(--colNum), auto);
     grid-template-rows: repeat(var(--rowNum), 50px);
     grid-column: 1;
     display: grid;
 }
 
 .empty {
     grid-column: 2;
     grid-row-start: 1;
     grid-row-end: 2;
     grid-template-columns: 1;
     display: grid;
 }


 * { background-color: rgba(255, 0, 0, 0.2); }
 * * { background-color: rgba(0, 255, 0, 0.2); }
 * * * { background-color: rgba(0, 0, 255, 0.2); }
 * * * * { background-color: rgba(255, 0, 255, 0.2); }
 * * * * * { background-color: rgba(0, 255, 255, 0.2); }
 * * * * * * { background-color: rgba(255, 255, 0, 0.2); }
 * * * * * * * { background-color: rgba(255, 0, 0, 0.2); }
 * * * * * * * * { background-color: rgba(0, 255, 0, 0.2); }
 * * * * * * * * * { background-color: rgba(0, 0, 255, 0.2); }
<div class="container">
  <div class="table" id='table'>
    <div>
      1
    </div>
    <div>
      2
    </div>
    <div id='place'>
      3
    </div>
    <div>
      4
    </div>
    <div>
      5
    </div>
    <div>
      6
    </div>
    <div>
      7
    </div>
  </div>
  <div class="empty">
    empty
  </div>
</div>

<button onclick="addDiv()">
  addDiv
</button>

<button onclick="addInput()">
  addInput
</button>

Запустите фрагмент и продолжайте нажимать кнопку addDiv. Все работает как положено, новые ячейки добавляются, и они переносятся в следующий ряд. Теперь, пожалуйста, нажмите addInput три-четыре раза; как вы можете видеть, при добавлении братьев и сестер input сетка перетекает в соседний столбец родительского контейнера.

Мои вопросы: почему это происходит? я что-то неправильно использую или это ошибка? Кроме того, как получить поведение с div при использовании input? (упаковка div не работает)

1 Ответ

1 голос
/ 20 января 2020

Поскольку входные данные имеют начальную ширину ( подробнее здесь ), необходимо сбросить их, установив ширину равной 100% его родительского элемента: 

.table > * {
    width: 100%;
}

Другое решение или Лучше всего работать с вышеуказанным вместе, чтобы предотвратить переполнение столбцов с помощью настройки и значения переполнения. Переполнение происходит только потому, что не хватает места. 

.table > * {
    overflow: hidden;
}

Я бы также предложил дать каждому ребенку класс вместо использования звездочки (*).

...