Problem with respecting grids, dynamically adding fields

Question

Problem with respecting grids, dynamically adding fields

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good morning,

I'm creating a form that the user will add more fields dynamically (#

Example:

Selectedareainredwascreatedmanuallyinthecode,it'scorrect!ButtheBlueareathatwascreateddynamicallyshouldoccupythesamesizeastheredarea(manual)whichdoesnotoccur:(

NOTE:Redandblueareasareonlymeanttoexemplifythelocation/size.

Followthecode( jsfiddle ), to view the problem you need to expand to the maximum area that renders the code.

Sorry for the bad code, I'm still studying ...

Thank you in advance.

Sincerely,

Jeferson Silva.

javascript html5 css bootstrap

asked by anonymous 09.02.2018 / 13:17

2 answers

0

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

2 - use html append instead of creating div, this new div will not contain styles, so it 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++;
}

09.02.2018 / 13:44

ListView Search Filter Results Equals Mysql

score 0 · Accepted Answer

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

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

The idea is correct, what is wrong is where div people-container is. you're adding form-row to form-row , the solution to your problem is to put the div with people-container out of form-row . I'll 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 out the code working here .