Problems when clicking an input

Asked

Viewed 178 times

0

Good afternoon,

Sometimes I can’t click an input from a form to fill it out but in others the form works normally without any problem.

This happens sporadically and, as a rule, happens to me in Chrome but I have also tested in Edge and the same happened to me.

Does anyone know what might be and how I can prevent it from happening?

Example of a form I’m using:

<form method="post" class="centrar" action="<?= base_url('viaturas/inserir') ?>">
    <div class="row">
        <div class="col-0 col-sm-0 col-m-4 col-l-4 col-xl-0"></div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="kms">Numero de KM da viatura</label>
                <input type="number" class="form-control " id="kms" name="kms" placeholder="Insira o numero de KM">
            </div>
        </div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="data">Data</label>
                <input type="date" class="form-control " id="data" name="data" placeholder="Insira a Data">
            </div>
        </div>
        <div class="col-12 col-sm-12 col-m-3 col-l-2 col-xl-3 text-center font-weight-bold">
            <div class="form-group">
                <label for="matricula">Matricula</label>
                <input type="text" class="form-control " id="matricula" name="matricula" value="<?= $matricula ?>" readonly>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-m-2 col-l-2 col-xl-3 text-center">
            <label class="batota">Botão</label>
            <button type="submit" class="btn buttonstyle form-control">Inserir</button>
        </div>
    </div>
</form>
  • What field is this happening?

  • does not happen in a specific field, usually happens in all

  • 1

    Are you using some kind of field validator?

  • which version bo Bootstrap?

  • I am using the codegniter validation form

  • bootstrap 4.3.1

  • It’s not about the problem, but it seems to me you’re using unnecessary classes: col-12 col-sm-12 col-m-3 col-l-2 col-xl-3... and the class col-l-x there is no.

Show 2 more comments

1 answer

0

Hello, your code presents some classes that do not exist in Bootstrap 4.3.1, unless you have not created them for another purpose remove them and use the ones that the framework offers, see below the Grid system used by it:

Grid Bootstrap V. 4.3.1

Ex: For a field you want to grab the entire screen of a large screen use col-Xl-12, so go...

Try removing classes that do not belong to the framework and adjust the columns according to what you want.

Post here if it worked :).

  • And I can’t create new classes in Bootstrap? What if I use col-l-2 to put a color for example or something else? This does not mean that it has implications on the grid, let alone that Grid can leave an input without being clickable...

  • Hello @Geremias, no doubt, can create CSS classes at will that since they do not have the same name as the Bootstrap ones will not change anything that the framework does, but in the question did not say anything that had made some CSS class and nor posted the whole code, if you haven’t solved your problem, please rephrase the question and post all the code so someone can help you :)

Browser other questions tagged

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