Position controls with bootstrap not aligning

Asked

Viewed 792 times

0

I need to do the following: Label above and control below the Abels. I took the example of the page itself twitter bootstrap and it’s not working. Below my code:

<div id="tabs-1">
    <form role="form"><!--A tag ul contem os titulos das abas-->

        <div class="form-group">

            <div class="form-group">
              <label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
              <input type="text" class="form-control;col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj">
            @*</div>

            <div class="form-group">*@
              <label for="txtContato" >Contato:</label>
              <input type="text" class="form-control;col-sm-2" id="txtContato" placeholder="Digite o Cnpj">
            @*</div>*@

            <label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
            @*<div class="col-sm-3">*@
              <select class="form-control;col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Associativa">Associativa</option>
                <option value="Franquia">Franquia</option>
                <option value="Propria">Própria</option>
              </select>
            @*</div>*@

            <label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
            @*<div class="col-sm-3">*@
              <select class="form-control;col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Ok">Ok</option>
                <option value="Atençao">Atenção</option>
                <option value="Erro">Erro</option>
                <option value="NaoCadastrado">Não Cadastrado</option>
                <option value="Desativado">Desativado</option>
              </select>
            @*</div>*@

            <label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
            @*<div class="col-sm-3">*@
              <select class="form-control;col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
                <option value="Geral">Geral</option>
                <option value="SouzaCruz">Souza Cruz</option>
              </select>
            @*</div>*@
        </div>
       </div>
</form>
</div>

If I remove this part of the select controls(class="col-sm-2 control-label"), is all on the same line. What I want is label on top and control on the bottom.

javascript html css asp.net-mvc-5 twitter-bootstrap

2 answers

2


The problem seems to be in the attribute class of his input, where

class="form-control;col-sm-2"

Change to

class="form-control col-sm-2"

   <form role="form"><!--A tag ul contem os titulos das abas-->

        <div class="form-group">

            <div class="form-group">
              <label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
                <input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
            </div>

            <div class="form-group">
              <label for="txtContato" >Contato:</label>
                <input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o Cnpj" />
            </div>

            <label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
            <div class="col-sm-3">
              <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Associativa">Associativa</option>
                <option value="Franquia">Franquia</option>
                <option value="Propria">Própria</option>
              </select>
            </div>

            <label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
            <div class="col-sm-3">
              <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Ok">Ok</option>
                <option value="Atençao">Atenção</option>
                <option value="Erro">Erro</option>
                <option value="NaoCadastrado">Não Cadastrado</option>
                <option value="Desativado">Desativado</option>
              </select>
            </div>

            <label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
           <div class="col-sm-3">
              <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
                <option value="Geral">Geral</option>
                <option value="SouzaCruz">Souza Cruz</option>
              </select>
           </div>
        </div>

</form>

Example: Jsfiddle

EDITED

To position the Abels in one line and the controls in another, you need to use one div classy row for each, example:

<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
         <label for="txtCnpjPdv" >CNPJ/Razão Social:</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
       <label for="txtContato" >Contato:</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <label for="ddlFiltrarRede" class="col-sm-2 control-label">Filtrar Rede:</label>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <label for="ddlFiltrarStatus" class="col-sm-2 control-label">Filtrar Status:</label>
    </div>
   <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <label for="ddlFiltrarVisao" class="col-sm-2 control-label">Visão:</label>
    </div>
</div>
<div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <input type="text" class="form-control col-sm-2" id="txtCnpjPdv" placeholder="Digite o Cnpj" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
       <input type="text" class="form-control col-sm-2" id="txtContato" placeholder="Digite o Cnpj" />
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarRede" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Associativa">Associativa</option>
                <option value="Franquia">Franquia</option>
                <option value="Propria">Própria</option>
              </select>
    </div>
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
         <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarStatus" >
                <option value="SemFiltro">Sem Filtro</option>
                <option value="Ok">Ok</option>
                <option value="Atençao">Atenção</option>
                <option value="Erro">Erro</option>
                <option value="NaoCadastrado">Não Cadastrado</option>
                <option value="Desativado">Desativado</option>
              </select>
    </div>
   <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
        <select class="form-control col-sm-2" name="ddlTipoEvento" id="ddlFiltrarVisao" >
                <option value="Geral">Geral</option>
                <option value="SouzaCruz">Souza Cruz</option>
              </select>
    </div>
</div>

Example: Jsfiddle

  • 1

    It didn’t work because the controls were width=100% and this doesn’t work. Is there any way I can decrease the size? The only way was the way I had done it. All the Abels must be on the same line and all the controls are on the same line below the Abels.

  • 1

    @pnet thus meaning ? http://jsfiddle.net/R9vT5/1/

  • 1

    I need to align the Labels in the same line and also the controls, below the Labels, corresponding to each label, obvious. That’s my need. I’m having a hard time working with bootstrap, simple things like this.

  • @pnet plus that, the way I sent it, if it’s not, put an image to exemplify it, it’s easier to understand.

  • @pnet you can increase a column instead of col-xs-2 col...2 place col-xs-3 col...3, the sum of all columns has to be 12, see if this solves

  • It didn’t work. If I put Filter/Status, then it works, because it only considers one word. When there are two it breaks.

  • 1

    @pnet in the CSS label {white-space:nowrap;}

  • Now yes, the post is closed. Thank you very much @abfurlan. It did work that way.

Show 3 more comments

0

The ideal is to take the grid control of the HTML input element and put in a div structure and always the div with the column control should be within a div class="Row":

CNPJ/Social Reason: ... Other controls to complete the GRID 12columns

I hope I helped my friend!!

  • Please include some source code to assist in troubleshooting, take a look at our Tour to check how to improve your responses and prevent them from being closed because they are incomplete.

Browser other questions tagged javascript html css asp.net-mvc-5 twitter-bootstrap

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