Выравнивание формы сворачивается в один ряд - PullRequest
Новая
       29

Выравнивание формы сворачивается в один ряд

1 голос
/ 24 марта 2019

У меня родительский элемент установлен на newTableForm с labelColumn и mainFormColumn в качестве дочерних элементов - но с текущим CSS все сворачивается в одну строку: 

.newTableForm {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 30px 30px 30px 40px;
  grid-gap: 10px;
  grid-template-areas: "... main" "labels main" "labels main" "... main";
  border: 2px dashed deeppink;
}

.labelColumn {
  grid-area: labels;
}

.mainFormColumn {
  grid-area: main;
}
<form method='post' action="/admin-post.php" class="newTableForm">
  <h4 class="mainFormColumn">
    Add a new price compare table
  </h4>
  <label for="store" class="labelColumn">Store</label>
  <input type="text" name="store" placeholder="" class="mainFormColumn"/>
  <label for="product-page" class="labelColumn">Product Page Link</label>
  <input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />
  <button class="mainFormColumn">Save new price compare table</button>
</form>

Есть ли здесь способ отменить поведение наложения в одну колонку?Я бы вообще удалил области шаблона, если бы не пустые разделы с ... (выше и ниже раздела с надписью)

Ответы [ 2 ]

1 голос
/ 24 марта 2019

Опять вы можете отбросить grid-template-areas при перекрытии нескольких областей сетки - и вы можете использовать псевдоэлементы для этого:

  • поместите labelColumn в первый столбец , используя grid-column: 1 и mainFormColumn во второй столбец , используя grid-column: 2.

  • after будет первый столбец в последней строке с использованием grid-row: -2 и grid-column: 1

  • before будет первый столбец в первый ряд с использованием grid-column: 1

См. Демо ниже: 

.newTableForm {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 30px 30px 30px 40px;
  grid-gap: 10px;
  border: 2px dashed deeppink;
}

.labelColumn {
  grid-column: 1;
}

.mainFormColumn {
  grid-column: 2;
}
.newTableForm:after, .newTableForm:before {
  content: '';
  display: block;
  grid-column: 1;
}

.newTableForm:after {
  grid-row: -2;
}
<form method='post' action="/admin-post.php" class="newTableForm">
  <h4 class="mainFormColumn">
    Add a new price compare table
  </h4>
  <label for="store" class="labelColumn">Store</label>
  <input type="text" name="store" placeholder="" class="mainFormColumn"/>
  <label for="product-page" class="labelColumn">Product Page Link</label>
  <input type="text" name="product-page" placeholder="Copy address here" class="mainFormColumn" />

  <button class="mainFormColumn">Save new price compare table</button>
</form>
0 голосов
/ 24 марта 2019

Я только что обновил ваш .newTableForm css с некоторыми обновлениями. Я надеюсь, что это поможет вам. Спасибо 

.newTableForm {
  display: flex;
  flex-direction: column;
  border: 2px dashed deeppink;
}
...