Error aligning Bootstrap form

Question

Error aligning Bootstrap form

Navigation

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

0

I am presenting a problem when aligning my form and it is that when I click on a inputtext as if it were to be entered, it validates it and I get its message and makes the name of textArea Description move '

This is the code I'm using

<form>
        <div class="form-row">
            <div class="col-xs-12 col-sm-6">
                <?= $form->field($model, 'idArea')->textInput(['maxlength' => true]) ?>
            </div>
            <div class="col-xs-12 col-sm-6">
                <?= $form->field($model, 'Nombre')->textInput(['maxlength' => true]) ?>
            </div>
        </div>
        <div class="form-row">
            <div class="col">
                <?= $form->field($model, 'Descripcion')->textarea(['maxlength' => true, 'rows' => "5"]) ?>
            </div>
        </div>
        <div class="form-group">
            <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
        </div>
    </form>

html css3 css bootstrap

asked by Sebastian Salazar 12.03.2018 в 05:36

source

3 answers

How to create a function that says whether or not the answers to a questionnaire are correct? Uncaught TypeError: $ (...) .appendTo is not a function

score 1 · Answer 1

With the basic code of Bootstrap works perfectly adapting it to your layout of the form, you should check how your HTML is generating your Bootstrap plugin or the specific version of Bootstrap used in it:

(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col">
      <label for="exampleInput1">First name</label>
      <input type="text" class="form-control" id="exampleInput1" placeholder="First name" required>
      <div class="invalid-feedback">
        Please type your first name.
      </div>
    </div>
    <div class="col">
      <label for="exampleInput2">Last name</label>
      <input type="text" class="form-control"  id="exampleInput2" placeholder="Last name" required>
      <div class="invalid-feedback">
        Please type your last name.
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <label for="exampleFormControlTextarea1">Example textarea</label>
      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
      <div class="invalid-feedback">
        Please type something.
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

score 0 · Answer 2

You could try closing the </div> below to put a line break with a <br> so that the description title is a little lower and the error message of your input text looks normal and does not move the other. Greetings.

score 0 · Answer 3

You can also try to put a id to div in which this description and css give a higher margin for example margin-top: 20px;

Or else create div empty in the middle and put a height of 20px for example, height: 20px;