CSS multicolumn combined with split of label and input (in HTML)

Question

I need to insert a multi-column which spans over 2 columns.

Since my final form consists of 150+ label/input -pairs and that I would fetch data from array, I need to keep the label and input separated in HTML (as-is in the code).

Question: What is the minimal adjusting in CSS that needs to be done to get existing code to span as multi-column over 2 columns? HTML should stay intact.

.form_content {
  display: grid;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}

.form_content label {
  grid-column: 1;
}

.form_content input {
  grid-column: 2;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="main.css">
  <title>Automated creation of form</title>
</head>
<body>

</body>
</html>

<div class="form_content">

  <!-- Labels -->
  <label for="1">Label-1</label>
  <label for="2">Label-2</label>
  <label for="3">Label-3</label>
  <label for="4">Label-4</label>
  <label for="5">Label-5</label>
  <label for="6">Label-6</label>

  <!-- Input fields -->
  <input id="1" type="text" name="1" value="-">
  <input id="2" type="text" name="2" value="-">
  <input id="3" type="text" name="3" value="-">
  <input id="4" type="text" name="4" value="-">
  <input id="5" type="text" name="5" value="-">
  <input id="6" type="text" name="6" value="-">

</div>

Mister Jojo · Answer 1 · 2020-08-05T15:57:51.710

0

this ?

.form_content {
  display: grid;
  grid-template-columns: 1fr 2fr ;
  grid-auto-rows: auto;
  grid-auto-flow: column;
}
label {text-align: right; padding: .5em .3em 0 0;  }
label::after {content:' :'}

.form_content label { grid-column: 1; }
.form_content input { grid-column: 2; }

@media screen and (max-height: 20em) {
  .form_content { grid-template-columns: 1fr 2fr 1fr 2fr;}
  .form_content > label:nth-of-type(n+4) { grid-column: 3; }
  .form_content > input:nth-of-type(n+4) { grid-column: 4 }
}

/* first attempt ..
.form_content label:nth-child(odd) { grid-column: 1; }
.form_content input:nth-child(odd) { grid-column: 2; }
.form_content label:nth-child(even) { grid-column: 3; }
.form_content input:nth-child(even) { grid-column: 4; }
*/

<div class="form_content">

    <!-- Labels -->
    <label for="1">Label-1</label>
    <label for="2">Label-2</label>
    <label for="3">Label-3</label>
    <label for="4">Label-4</label>
    <label for="5">Label-5</label>
    <label for="6">Label-6</label>
  
    <!-- Input fields -->
    <input id="1" type="text" name="1" value="-1">
    <input id="2" type="text" name="2" value="-2">
    <input id="3" type="text" name="3" value="-3">
    <input id="4" type="text" name="4" value="-4">
    <input id="5" type="text" name="5" value="-5">
    <input id="6" type="text" name="6" value="-6">
  
  </div>

edited Aug 05 '20 at 15:57

answered Aug 05 '20 at 13:33

Mister Jojo

20,093
6
21
40

The labels should be arranged vertical. – Toolbox Aug 05 '20 at 13:36
1

@Toolbox what do you mean by "vertical"? I don't picture what it could be – Mister Jojo Aug 05 '20 at 13:40
2 columns. 1 column filled with 3 labels, the rest continues in column 2. Dynamically changes based on the height of the div. – Toolbox Aug 05 '20 at 13:47
Getting closer. The width can actually be set to fixed since the trigger of multi-column should be the height. of column. It looks good at first glance, but when reduce/increase the height the startpoint should be 6 on left side, and when reducing to extends that the 6 labels does not fit, the rest should be visible on the right column. – Toolbox Aug 05 '20 at 15:01
1

This is the second time that you have changed your presentation rules, I have the impression that it will never end, and I find it really unpleasant as a game. I have a lot of trouble translating clearly into my language ( en) what you are looking for. Please make a full statement with pictures to finally know what you are really looking for! – Mister Jojo Aug 05 '20 at 15:10
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219279/discussion-between-toolbox-and-mister-jojo). – Toolbox Aug 05 '20 at 15:28
@Toolbox so? nothing to say about my last change? – Mister Jojo Aug 05 '20 at 17:50
The cut between the columns is correct now. Seems that it is a static cut that split the label (1-3) and label (3-6) which is fine. The intention was to utilize multi-column. Highly appreciate your updates suggestions. I will approve the answer, and see if I create another clearer question. – Toolbox Aug 05 '20 at 18:07
@Toolbox if [input / label] and the number of columns concerns a dynamic calculation, this problem should only be solved with the addition of javascript; except if this page is loaded in php, in which case the break values may have to be calculated in the php code – Mister Jojo Aug 05 '20 at 18:15

Umutambyi Gad · Answer 2 · 2020-08-05T15:06:49.290

0

Is that you want

.form_content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-flow: column;
}

label {
  grid-column: 1;
}

input {
  grid-column: 2;
}

label:nth-of-type(n+4) {
  grid-column: 3;
}

input:nth-of-type(n+4) {
  grid-column: 4;
}

label {
  text-align: right;
}

label,
input {
  margin: 5px;
}

<div class="form_content">

  <!-- Labels -->
  <label for="1">Label-1</label>
  <label for="2">Label-2</label>
  <label for="3">Label-3</label>
  <label for="4">Label-4</label>
  <label for="5">Label-5</label>
  <label for="6">Label-6</label>

  <!-- Input fields -->
  <input id="1" type="text" name="1" value="-">
  <input id="2" type="text" name="2" value="-">
  <input id="3" type="text" name="3" value="-">
  <input id="4" type="text" name="4" value="-">
  <input id="5" type="text" name="5" value="-">
  <input id="6" type="text" name="6" value="-">

</div>

edited Aug 05 '20 at 15:06

answered Aug 05 '20 at 13:53

Umutambyi Gad

4,082
3
18
39

Not exactly. The label and input should be kept as pair. Each time the amount of pairs are hitting the bottom of column 1, the rest should appear in column 2. – Toolbox Aug 05 '20 at 14:14
PO question is about : **HTML should stay intact.** – Mister Jojo Aug 05 '20 at 14:48
Yes, HTML should not be edited, otherwise it will break future need of for-loops, for importing label/input from array. Also the label/input pair should be vertical, not horizontal, e.g. Label 1 should come below Label 2, etc. – Toolbox Aug 05 '20 at 14:51
@Toolbox check again no I guess I got what you need – Umutambyi Gad Aug 05 '20 at 15:07
there is no difference with my answer, but anyway that's not what he's looking for ... – Mister Jojo Aug 05 '20 at 15:13
according to the explanation he gave me I guess it is – Umutambyi Gad Aug 05 '20 at 15:14

CSS multicolumn combined with split of label and input (in HTML)

2 Answers2