Input by pasting the Radios

1

I'm building a form , where I have two radios inline and a input below. I just do not know why input is casting in radios , leaving form all misaligned. Here's 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>
    
asked by anonymous 04.11.2014 / 13:38

1 answer

1

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

1- That way 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- That way the radius 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>
    
05.11.2014 / 14:29