Problem respecting grids, adding fields dynamically

Asked

Viewed 99 times

0

Good morning,

I am creating a form that the user will add more fields dynamically (Reference code), But the field is created but does not respect the grids (Bootstrap4) that should follow.

Example:

Problema

Area selected in red was created manually in the code, that’s correct! But the Blue area that was created dynamically should occupy the same size as the red area (manual) which does not occur :(

Note: Red and blue area are only for example location/size.

Follows the code (jsfiddle), to view the problem it is necessary to expand to the maximum there is area that renders the code.

Sorry about the bad code, I’m still studying...

Thank you in advance.

Sincerely yours,

Jeferson Silva.

javascript css html5 bootstrap

2 answers

0


Simple friend, taking a look at the link you made available I noticed that you made a:

let container = document.getElementById('people-container');
let div = document.createElement('div');
div.innerHTML = template;
container.appendChild(div);

The idea is right, what’s wrong is where the div people-container meets. you are adding form-row within a form-row, the solution to your problem is to put the div with id people-container out of the div form-row. I will share the code with your edited structure.

<body> 

<div class="container">
  <div class="row">
    <div class="col-12" id="form">
      <form action="" method="post">
        <div class="form-row">
          <div class="form-group col-md-12">
            <blockquote class="blockquote text-center">
              <h1>Nome_Projeto</h1>
              <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, velit.</em></p>
            </blockquote>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="NomeDE">Nome Data Exntesion:</label>
            <input type="text" class="form-control" id="NomeDE" placeholder="Nome Data Extension..." name="NomeDE" required>
          </div>
          <div class="form-group col-md-6">
            <label for="ExternalKey">External Key:</label>
            <input type="text" class="form-control" id="ExternalKey" placeholder="External Key..." name="ExternalKey" required>
          </div>
        </div>
        <div class="form-row" >
          <div class="form-group col-md-6">
            <label for="NomeCampo">Nome Campo:</label>
            <input type="text" class="form-control" id="NomeCampo" placeholder="Nome Campo..." name="NomeCampo[1]">
          </div>
          <div class="form-group col-md-3">
            <label for="TipoCampo">Tipo:</label>
            <select class="form-control" id="TipoCampo" name="TipoCampo[1]">
                  <option>Text</option>
                  <option>Number</option>
                  <option>Date</option>
                  <option>Boolean</option>
                  <option>EmailAddress</option>
                  <option>Phone</option>
                  <option>Decimal</option>
                  <option>Locale</option>
            </select>
          </div>
          <div class="form-group col-md-3">
            <label for="StatusCampo">Status:</label>
            <select class="form-control" id="StatusCampo" name="StatusCampo[1]">
                  <option>Primary Key</option>
                  <option>Nullable</option>
            </select>
          </div>
        </div>
        <div id="people-container"></div> // coloquei a div aqui, fora da div form-row
        <br><br>


        <div class="form-group col-md-12 text-center">
          <a href="javascript:;" id="add-new-person" class="add-new-person">+ Campo</a>
        </div>
      </form>
    </div>
  </div>
</div>

<script  src="js/add.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Good studies Jeferson. Check the code working here.

  • Man thank you so much yesterday I was trying a lot of things and I hadn’t gotten into it!

  • How great was I able to help you Jeferson, could you mark my answer as the right one ? Just click on the right icon on the side of my answer :) .

  • already marked brother! Thank you very much!

0

1 - remove the div id="people-container", id must be unique, if necessary create a class

2 - uses html append instead of creating div, this new div will not contain styles, and therefore does not respect grids

let i = 2;
document.getElementById('add-new-person').onclick = function () {
    let template = `
        <div class="form-group col-md-6">
      <label for="NomeCampo">Nome Campo:</label>
      <input type="text" class="form-control" id="NomeCampo" placeholder="Nome Campo..." name="NomeCampo[1]">
    </div>
    <div class="form-group col-md-3">
      <label for="TipoCampo">Tipo:</label>
      <select class="form-control" id="TipoCampo" name="TipoCampo[1]">
            <option>Text</option>
            <option>Number</option>
            <option>Date</option>
            <option>Boolean</option>
            <option>EmailAddress</option>
            <option>Phone</option>
            <option>Decimal</option>
            <option>Locale</option>
      </select>
    </div>
    <div class="form-group col-md-3">
      <label for="StatusCampo">Status:</label>
      <select class="form-control" id="StatusCampo" name="StatusCampo[1]">
            <option>Primary Key</option>
            <option>Nullable</option>
      </select>
    </div>

`;

let container = document.getElementById('people-container');
container.insertAdjacentHTML('beforeend', template);

i++;
}

  • Thank you also for responding!! from the heart!

Browser other questions tagged javascript css html5 bootstrap

You are not signed in. Login or sign up in order to post.