Does not work Focus in input

Asked

Viewed 471 times

0

When the page is expanded is working perfectly, but the moment I resize to the size of a mobile phone it breaks down the way I really want to, but the phocus is only working for the last field.

Using Bootstrap v3.2.0

What I did wrong?

HTML:

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-3">
                    <label class="display-label alinhamentoLabel">Razão Social</label>
                    <input type="text" name="razao_social" id="razao_social" placeholder="RAZÃO SOCIAL" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3">
                    <label class="display-label alinhamentoLabel">Nome Fantasia</label>
                    <input type="text" name="nome_fantasia" id="nome_fantasia" placeholder="NOME FANTASIA" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3">
                    <label class="display-label alinhamentoLabel">CNPJ/CPF</label>
                    <input type="text" name="cnpj_cpf" id="cnpj_cpf" placeholder="CNPJ/CPF" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3">
                    <label class="display-label alinhamentoLabel">Inscrição Estadual</label>
                    <input type="text" name="inscricao_estadual"   id="inscricao_estadual" placeholder="INSCRIÇÃO ESTADUAL" 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
            </div>
        </div>
    </div>
</div>
twitter-bootstrap

2 answers

0

You can solve it as follows: 

<body onload="document.getElementById('razao_social').focus()">

  • The problem is that this is a form and will be loaded on mobile and when I click on the field it does not take the Focus to type in the field, only the last one is the field "State Registration" the others is as if it is blocked.

0


I honestly haven’t been able to understand the reason for the problem, but apart from the classes col-Xs-12 col-Sm-12 col-Md-12 of all its inputs will work.

Edited

Okay, as I understand it, you setting in your Divs that the size will be col-Md-3, but not setting the size for devices with Sm or Xs resolution, Bootstrap ends up getting lost a little. So if you change your code by inserting col-Sm-12 and col-Xs-12 together with col-Md-3, it will work because you will actually define how you want the elements to be disposed of in smaller resolutions.

Would that way:

<div class="row">
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-3 col-xs-12 col-sm-12">
                    <label class="display-label alinhamentoLabel">Razão Social</label>
                    <input type="text" name="razao_social" id="razao_social" placeholder="RAZÃO SOCIAL" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12">
                    <label class="display-label alinhamentoLabel">Nome Fantasia</label>
                    <input type="text" name="nome_fantasia" id="nome_fantasia" placeholder="NOME FANTASIA" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12">
                    <label class="display-label alinhamentoLabel">CNPJ/CPF</label>
                    <input type="text" name="cnpj_cpf" id="cnpj_cpf" placeholder="CNPJ/CPF" required 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
                <div class="col-md-3 col-xs-12 col-sm-12">
                    <label class="display-label alinhamentoLabel">Inscrição Estadual</label>
                    <input type="text" name="inscricao_estadual"   id="inscricao_estadual" placeholder="INSCRIÇÃO ESTADUAL" 
                    value="" class="col-xs-12 col-sm-12 col-md-12"/>
                </div>
            </div>
        </div>
    </div>
</div>

  • Thanks Adriano with this would also solve my problem, but the solution I found was to add in the tags <label> the class "col-Xs-12 col-Sm-12 col-Md-12" with this also worked..

  • Good, good to know...

  • I changed my code to the way you indicated, I believe it’s the right one.

Browser other questions tagged twitter-bootstrap

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