Position elements on the screen

Asked

Viewed 39 times

1

How to position elements without breaking

I have a screen with some inputs, am using bootstrap and defining the sizes of the fields, but still they are broken as in the image below.

Campos quebrados

I need them to stay straight and with the Label upon them.

Codigo Edit

<section class="content">
    <form action="http://localhost:8080/qs/index.php/cartao/editar" id="frmcartao" method="post" accept-charset="utf-8">
    <input type="hidden" name="seq_cartao" value="N" id="seq_cartao"  />

            <div class="row">
        <div class="col-md-12">
            <div class="box box-warning">
                <div class="box-body">
                    <div class="row">
                      <div class="form-group">
                      <label for="matricula" class="col-md-2 control-label">Matricula*</label>
                      <div class="col-md-2">
                <input type="text" name="matricula" value="" id="matricula" class="form-control"  />
                        </div>
                        </div>
                        <br>
                        <input type="hidden" name="seq_matricula" value="" id="seq_matricula"/>

                        <div class="form-group">
                        <label for="chip" class="col-md-2 control-label">Chip</label>
                        <div class="col-md-2">
                <input type="text" name="chip" value="" id="chip" maxlength="100" class="form-control"  />

                        </div>
                        </div>
                        <div class="form-group">
                        <label for="data_cancelamento" class="col-md-2 control-label">Data de Cancelamento</label>
                        <div class="col-md-2">
                <input type="text" name="data_cancelamento" value="" id="data_cancelamento" class="form-control"  />
                        </div>
                        </div>
                        <div class="form-group">
                        <label for="cod_barra" class="col-md-2 control-label">Código de Barras*</label>
                        <div class="col-md-2">
                <input type="text" name="cod_barra" value="" id="cod_barra" maxlength="50" class="form-control"  />
                        </div>
                        </div>
                        </div>

                    </div>

                    <div class="box-footer">
                    <button type="button" class="btn btn-default" onclick="document.location.href='http://localhost:8080/qs/index.php/cartao'">Cancelar</button>
                    <button type="submit" class="btn btn-warning pull-right">Confirmar</button>
                </div>
            </div>
        </div>
    </div>
    </form> </section>

Edit

As you keep adding form-control

Form-control

html5 css3 twitter-bootstrap codeigniter

  • Face if possible enters the browser of a Ctrl+U and copies the HTML code already rendered. The way you posted it is complicated to answer you. Already with the code already loaded on the page becomes easier

  • @hugocsl Opa, I edited the post and put it already rendered. sorry for the silly error.

  • Place inputs inside Divs: https://jsfiddle.net/zcog3snf/

  • Guy here rendered well https://imgur.com/6dP7UNd, probably you are using some CSS a plus ai, or else it is the way you have assembled PHP that is not correct... The strange thing is that in your image you have two inputs ok and two wrong.... you’ve already checked what’s different between what’s wrong and what’s right?

  • There’s nothing different between them @hugocsl

  • @Sam tried the following. <div class="form-group col-Md-2"> <label for="chip">Chip</label> <div> <input type="text" name="chip" value="" id="chip" maxlength="100" /> </div> </div> , but to no avail

  • Puts in your input class="form-control" take a look at the documentation https://getbootstrap.com/docs/3.3/css/#Forms

  • 1

    @hugocsl added a print and updated code showing how the form-control was

Show 3 more comments

1 answer

1


If your idea is to keep the Labels on the input side, I recommend using a "col-xx-xx" on the label as well 

<div class="form-group">
    <label for="nome" class="col-md-2 control-label">Nome</label>        
    <div class="col-md-10">
      <input name="nome" type="text" class="form-control" >
    </div>
  </div>

If you want them to stay on one line and the input on the other can use one 

<br>

after the label or else leave the field inside the div

Browser other questions tagged html5 css3 twitter-bootstrap codeigniter

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