Align multiple divs created with javascript-CodePudding

I have a script which, for every line in a text file, creates a button with a name and a .innerHTML. I have attempted aligning them in a grid (2 buttons wide by x buttons tall) next to a large text area, however have not been able to figure out how to. Could someone assist me?

CSS

.textArea{
    width: 700px;
    height: 520px;
    color: white;
    border: none;
    background-color: black;
    resize: none;
    outline: none;
}
.buttons {
    width: 200px;
    height: 100px;
}

HTML

<textarea class ="textArea"id="output" name="consl" cols="100" readonly="true"></textarea>

let btn = document.createElement('button')
btn.innerHTML = title
btn.name = ">>>"   customs[1]
btn.className = "customButtons"
document.body.appendChild(btn)

Image of what I am aiming for (not to scale):

CodePudding user response：

Here is a codepen sample where you can find something similar to what you try to achieve : https://codepen.io/aSH-uncover/pen/XWqWomj

If you type text on the text area, buttons will appear on the right, 2 new buttons each time you add a new line in the text area by pressing 'enter' (I am unsure if you wanted the button count to match your text or not, anyway a better approach regarding line count is detailled in this response: How to get number of rows in <textarea > using JavaScript?)

The things to remember regarding your main question is the usage of flex box, for more information check this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

In your case, we give the buttons container a display of flex and we ask it to wrap elements on several rows.

.buttons {
  display: flex;
  flex-wrap: wrap;
}

Then we give the each button a width of 50% so that two buttons will completly fill one row and force the wrapping to occur.

button {
  width: 50%;
}

Note that there are other solutions to this problem ;)

CodePudding user response：

You can achieve it in different ways: for example a possible solution would be to style elements by using float. In the following solution it is not used a div for container, but the layout is built up without such an element.

Also look carefully at the buttons and at the customs array and compare their content and their order: if you need the buttons to be shown into a different order you just need to adjust the order of the elements of such an array.

The following snippet is a working example, if you wish to see it in action, just click on the button Run Code snippet at the end of the snippet:

let title = "This is the button "
let customs = ["Alfa","Bravo","Charlie","Delta",]

customs.forEach(function(c)
  {
    let btn = document.createElement('button');
    btn.innerHTML = title   c;
    btn.name = ">>>"   c;
    btn.className = "customButtons";
    document.body.appendChild(btn);
  }
);

textArea
{
  background-color: black;
  border: none;
  color: white;
  outline: none;
  height: 260px;
  width: 50%;
}

button
{
  height: 100px;
  width: 20%;
}

button, textArea
{
  text-align: center;
  float: left;
}

<textarea class ="textArea" id="output" name="consl" readonly="true">Text content into text area</textarea>