Input pasting on Radios

Asked

Viewed 123 times

1

I’m building a form, where I have two radios inline and a input down. Only I don’t know why input is gluing us radios, leaving the form misaligned. This is the code:

<section class="col col-3">                                     
    <div class="form-inline">
        <!--ng-show='pessoa.id_tipo_pessoa == 1'-->
        <div class="form-group" ng-show="labelPF">
            <input type="radio" ng-model='pessoa.id_tipo_pessoa' value="1" onClick="$('#cadastroPF-form').clearValidation();" ng-click="pessoa.cnpj=''" id="pf">
            <i></i>CPF
        </div>
        <div class="form-group" ng-show="labelPJ">
            <input type="radio" ng-model='pessoa.id_tipo_pessoa' value="2" onClick="$('#cadastroPF-form').clearValidation();" ng-click="pessoa.cpf=''" id="pj">
            <i></i>CNPJ     
        </div>
    </div>
    <label ng-show='pessoa.id_tipo_pessoa == 1' class="input">
        <i class="icon-append fa fa-user"></i>
        <input type="text" name="cpf" id="cpf" data-mask="999.999.999-99" placeholder="Número CPF" ng-model="pessoa.cpf" ng-blur="getCpf('cpf')">
    </label>
    <label ng-show='pessoa.id_tipo_pessoa == 2' class="input">
        <i class="icon-append fa fa-user"></i>
        <input type="text" name="cnpj" id="cnpj" data-mask="99.999.999/9999-99" placeholder="Número CNPJ" ng-model="pessoa.cnpj" ng-blur="getCnpj('cnpj')">
    </label>
</section>
html twitter-bootstrap

  • I played your code in codepen and did not understand the question, the problem is the radio being pasted in the input? Because then just put a margin.

1 answer

1

Hello, I saw you are using the bootstrap. If it is version 3 you can do so ho.

1- Thus the radios are above the input

 <div class="form-group">
    <label class="col-lg-2 control-label">Inline radios</label>
    <div class="col-lg-10">
        <label class="radio-inline">
            <input type="radio" name="radio" checked="checked"> Foobar
        </label>
        <label class="radio-inline">
            <input type="radio" name="radio"> Another
        </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-2 control-label">Full part name</label>
    <div class="col-lg-6">
      <input type="text" name="name" class="form-control">
    </div>
  </div>

2- This way the radio is positioned in front of the input

<div class="form-group">
    <label class="radio-inline">
          <input type="radio" name="radio" checked="checked"> Foobar
     </label>
    <div class="col-lg-6">
      <input type="text" name="name" class="form-control">
    </div>
  </div>

Browser other questions tagged html twitter-bootstrap

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