Does not work focus on input

Navigation
0

When the page is expanded it works perfectly, but the moment I resize to the size of a cell phone it breaks the way I want, but focus is only working for the last field.

Using Bootstrap v3.2.0

What did I do 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>
    
asked by anonymous 04.09.2014 / 16:56

2 answers

0

I honestly still can not figure out the reason for the problem, but taking the col-xs-12 col-sm-12 col-md-12 classes of all your inputs will work.

Edited

Ok, so I understand, you defining 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 bit. So if you change your code by inserting col-sm-12 and col-xs-12 along with col-md-3, it will work, because you'll actually define whatever layout is available at lower resolutions.

It would look like this: 

<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>
    
04.09.2014 / 22:30
0

You can solve it as follows: 

<body onload="document.getElementById('razao_social').focus()">
    
04.09.2014 / 17:00
Image with 100% width Problem signing into the magento backend