Apply CSS to a line

Asked

Viewed 137 times

0

At the moment it’s this way like the code below, but I wanted the inputs related to fields Crachá, Pessoa, e Nome were aligned within a <div class='col-lg-12'>. But when you put the button to open a modal next to the input Crachá they are all misaligned and unformatted.

Follow a screen print when the code below runs: inserir a descrição da imagem aqui

index php.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Início do sript JQuery JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Fim do script JQuery JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <div class="row"> 

        <div class="col-lg-12">

            <!-- inicia row -->
            <div class="row"> 
                <div class="col-lg-3 input-group" style="padding-left:16px;"><!-- Inicio Input Crachá -->
                    <label for="ex1">Crachá: </label>
                    <input type="text" class="form-control idfunc" name='cracha' maxlength="5">
                    <span class="input-group-btn">
                    <button type="button" class="btn btn-secondary" style="margin-top:25px;" data-toggle="modal" data-target="#Modal_idfunc">...</button>
                    </span>
                </div><!-- Fim Input Crachá -->

            <!-- termina row -->
            </div>

            <!-- inicia row -->
            <div class="row">

                <div class="col-lg-12">
                    <div class="col-lg-3"><!-- Inicio Input Bairro -->
                        <label for="ex1">Pessoa: </label>
                        <input  type="text"  class="form-control" id="" name="id_pessoa" size="40"><br>
                    </div><!-- Fim Input Bairro -->
                    <div class="col-lg-6"><!-- Inicio Input Bairro -->
                        <label for="ex1">Nome </label>
                        <input  type="text"  class="form-control" id="" name="nome" size="40"><br>
                    </div>
                    <div class="checkbox col-lg-3" style="margin-top:30px;"><!-- Inicio checkbox Registro Inativo-->
                        <label>
                            <input type="checkbox" name="inativo" value="true" style="outline:none;">Funcionário Inativo
                        </label>
                    </div><!-- Fim checkbox Registro Inativo-->
                </div>

            <!-- termina row -->
            </div>

        </div>

    </div>

html css

  • This only happens after you put the button to open the modal?

  • Before you put the button, it’s perfect?

  • Yeah, I don’t know why that

  • See if the answer below solves the problem. Or else it would be good to post in the question an image of "before" of "after".

  • I’ll edit the code that William sent and show a screen print

  • The button is pushing the field to the left.

  • face don’t really know why this is happening, the fields don’t align and I’ve tried several ways

  • I think that button should have position: absolute, getting over the input.

  • I don’t know if Bootstrap already does it natively, but try putting it in the button span: style="position: absolute; top:0;right:0;"

  • the button is fixed but did not solve for inputs to go up, but was already helpful

Show 5 more comments

1 answer

1


[Editing]

I can’t say for certain, but input-group (I believe that the style="padding-left:16px" also be a gambit to try to fix something) should not be used in the same element with col-, he must be a child element.

However use form- combined with col- is very difficult to hit, almost impossible, since its useless is that the Abels are on top, so the best would be to use everything with col same and the form- just for your button calling the modal, it should look like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="row">
    <div class="col-md-3">
        <label>Crachá:</label>
        <div class="input-group">
            <input type="text" name="cracha" class="form-control">
            <a class="btn input-group-addon" data-toggle="modal" data-target="#Modal_idfunc">...</a>
        </div>
    </div>
    <div class="col-md-3">
        <label>Pessoa:</label>
        <input type="text" name="id_pessoa" class="form-control">
    </div>
    <div class="col-md-3">
        <label>Nome:</label>
        <input type="text" name="nome" class="form-control">
    </div>
    <div class="col-md-3">
        <div class="checkbox" style="padding-top: 22px;">
            <label>
                <input name="inativo" value="true" type="checkbox"> Funcionário Inativo
            </label>
        </div>
    </div>
</div>

Documentation

Start by following the documentation examples as they are/are:

The div class="row", use the classes cols without Row of course it will not work, you have to follow the Bootstrap documentation strictly, the documentation is very clear:

Content should be placed Within Columns, and only Columns may be immediate Children of Rows.

Translating:

Content should be placed inside columns and only columns can be immediate children of rows

No use sticking out code without understanding what he does for a real friend and another detail this <br> there also makes no sense:

 </div><br><!-- Fim Input Crachá -->

Probably the grids didn’t work out and you tried a gambit.

Try to adjust:

<div class="row"> 

    <div class="col-lg-12">

        <!-- inicia row -->
        <div class="row"> 
            <div class="col-lg-3 input-group" style="padding-left:16px;"><!-- Inicio Input Crachá -->
                <label for="ex1">Crachá: </label>
                <input type="text" class="form-control idfunc" name='cracha' maxlength="5">
                <span class="input-group-btn">
                <button type="button" class="btn btn-secondary" style="margin-top:25px;" data-toggle="modal" data-target="#Modal_idfunc">...</button>
                </span>
            </div><!-- Fim Input Crachá -->

        <!-- termina row -->
        </div>

        <!-- inicia row -->
        <div class="row">

            <div class="col-lg-12">
                <div class="col-lg-3"><!-- Inicio Input Bairro -->
                    <label for="ex1">Pessoa: </label>
                    <input  type="text"  class="form-control" id="" name="id_pessoa" size="40"><br>
                </div><!-- Fim Input Bairro -->
                <div class="col-lg-6"><!-- Inicio Input Bairro -->
                    <label for="ex1">Nome </label>
                    <input  type="text"  class="form-control" id="" name="nome" size="40"><br>
                </div>
                <div class="checkbox col-lg-3" style="margin-top:30px;"><!-- Inicio checkbox Registro Inativo-->
                    <label>
                        <input type="checkbox" name="inativo" value="true" style="outline:none;">Funcionário Inativo
                    </label>
                </div><!-- Fim checkbox Registro Inativo-->
            </div>

        <!-- termina row -->
        </div>
</div>

  • I’ll send in the chat, wait a second call me because I don’t know how to create kk I’m new here

  • Let’s go continue this discussion in chat.

  • 1

    thanks for your help and for sharing your knowledge

Browser other questions tagged html css

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