Aligning a checkbox component vertically in the center of Row

Asked

Viewed 593 times

3

How do I align a check box vertically in the center of Row?

My project is Asp.net core mvc.

inserir a descrição da imagem aqui

input[type="text"], select {
    /*font-size: 13px;*/
}

.selectClass {
    /*font-size: 13px;*/
}

label {
    /*font-size: 13px;*/
    /*color:#808080;*/
}

form label {
    font-weight:normal;
}

input[type=text] {
    width: 100%;
    /*padding: 12px 20px;*/
    /*margin: 8px 0;*/
    box-sizing: border-box;
    /*border: 1px solid #555;*/
    outline: none;
}

input[type=text]:focus {
    background-color: lightblue;
    color:black;
}

textarea:focus {
    background-color: lightblue;
    color: black;
}

/*.distanciaForms div[class^="col-"] {*/
    /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
/*}*/

.form-group {
    margin-bottom: 1% !important;
}
<div class="form-group row">       
	<div class="col-md-10">
	<div class="col-md-3">
		<button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
	</div>
	<div class="col-md-12" id="div-contatos">
		<div class="row">
			<div class="col-md-4">
				<label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
				<select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
			</div>
			<div class="col-md-5">
				<label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
				<input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
			</div>
			<div class="col-md-3">
				<div class="checkbox-custom checkbox-default">
					<input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked
						   autocomplete="off" />
					<label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
				</div>
			</div>
		</div>
		</div>
	</div>
</div>

css asp.net-mvc html5

  • It’s Bootstrap 3 or 4?

  • 1

    A simple way to do this is by a label "empty" after its col-Md-3: <label class="control-label">&nbsp;</label>

  • Is Bootstrap 3...

  • It worked @Roque Santos!!! Thanks!!! Comment on the main post for me to mark as a reply... :)

  • Feito @Masterjr

2 answers

3

You can line up with a padding-top.

Show in "Whole page" to better see the result. And if you think it necessary use the rules of media query @media to treat the class and change that padding on small screens.

  /* classe para fazer o alinhamento */
    .valign {
      padding-top: 31px;
    }
  
  input[type="text"], select {
        /*font-size: 13px;*/
    }
    
    .selectClass {
        /*font-size: 13px;*/
    }
    
    label {
        /*font-size: 13px;*/
        /*color:#808080;*/
    }
    
    form label {
        font-weight:normal;
    }
    
    input[type=text] {
        width: 100%;
        /*padding: 12px 20px;*/
        /*margin: 8px 0;*/
        box-sizing: border-box;
        /*border: 1px solid #555;*/
        outline: none;
    }
    
    input[type=text]:focus {
        background-color: lightblue;
        color:black;
    }
    
    textarea:focus {
        background-color: lightblue;
        color: black;
    }
    
    /*.distanciaForms div[class^="col-"] {*/
        /*padding: calc(15px / 2);*/ /* calcula a distancia entro um inpute e outro e os cantos da tela*/
    /*}*/
    
    .form-group {
        margin-bottom: 1% !important;
    }
  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


    <div class="form-group row">       
      <div class="col-md-10">
      <div class="col-md-3">
        <button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
      </div>
      <div class="col-md-12" id="div-contatos">
        <div class="row">
          <div class="col-md-4">
            <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
            <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
          </div>
          <div class="col-md-5">
            <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
            <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
          </div>
          <div class="col-md-3">
            <div class="checkbox-custom checkbox-default valign">
              <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked autocomplete="off" />
              <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>

  • Thanks @hugocsl...

  • @Young Masterjr tmj!

2


A quick way to do it would be to add a label with empty content after the div <div class="col-md-3">, so it would fill the space above and its checkbox would be in the same proportion of the other fields.

See the following example:

<div class="form-group row">       
    <div class="col-md-10">
    <div class="col-md-3">
        <button class="btn btn-primary form-control" id="btn-add-telefone">Novo contato</button>
    </div>
    <div class="col-md-12" id="div-contatos">
        <div class="row">
            <div class="col-md-4">
                <label name="PessoaContatoViewModel[0].ContatoTipoId" class="control-label">Tipo de Contato</label>
                <select name="PessoaContatoViewModel[0].ContatoTipoId" data-plugin="selectpicker" title="Selecione uma opção" class="form-control show-tick show-menu-arrow"></select>
            </div>
            <div class="col-md-5">
                <label name="PessoaContatoViewModel[0].Contato" class="control-label">Contato</label>
                <input type="text" name="PessoaContatoViewModel[0].Contato" class="form-control" />
            </div>
            <div class="col-md-3">
                <label name="PessoaContatoViewModel[0].ContatoPrincipal" class="control-label">&nbsp;</label>
                <div class="checkbox-custom checkbox-default">
                    <input type="checkbox" name="PessoaContatoViewModel[0].ContatoPrincipal" checked
                           autocomplete="off" />
                    <label for="PessoaContatoViewModel[0].ContatoPrincipal">Contato Principal</label>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>

Browser other questions tagged css asp.net-mvc html5

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