Icon of misaligned input

Asked

Viewed 245 times

-1

I have a password type input with span where the bootstrap icon is this misaligned, only Password type, text works normally

<div class="panel-body">
                    <form class="form-signin" method="POST" action="valida_login.php">
                        <fieldset>
                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                                <input class="form-control" placeholder="Digite seu usuario.." name="usuario" type="text" required autofocus>
                            </div>
                            <div style="margin-bottom: 25px" class="input-group">
                                <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                <input class="form-control" placeholder="Digite sua senha.." name="senha" type="password" required autofocus>
                            </div>
                            <a class="text-center text-danger" href="" style="float: right; font-size: 12px">Esqueceu sua senha?</a>
                            <br><br>
                            <button class="btn btn-primary btn-block mb-10" type="submit" style="background-color: #027CC1; border: solid 1px #027CC1"><i class="fa fa-check"></i> Entrar</button>
                        </fieldset>
                    </form>
                    <p class="text-center text-danger">
                        <?php
                            if(isset($_SESSION['loginErro'])){
                                echo $_SESSION['loginErro'];
                                unset($_SESSION['loginErro']);
                            }
                        ?>
                    </p>
                </div>

inserir a descrição da imagem aqui

1 answer

0

As can be seen below, no inconsistencies in the html output can be observed! I suggest checking the html markup and the order of the style files and scripts.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
	<div class="panel">
        <div class="panel-body">
            <form class="form-signin" method="POST" action="#">
                <fieldset>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        <input class="form-control" placeholder="Digite seu usuario.." name="usuario" type="text" required autofocus>
                    </div>
                    <div style="margin-bottom: 25px" class="input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        <input class="form-control" placeholder="Digite sua senha.." name="senha" type="password" required autofocus>
                    </div>
                    <a class="text-center text-danger" href="" style="float: right; font-size: 12px">Esqueceu sua senha?</a>
                    <br><br>
                    <button class="btn btn-primary btn-block mb-10" type="submit" style="background-color: #027CC1; border: solid 1px #027CC1"><i class="fa fa-check"></i> Entrar</button>
                </fieldset>
            </form>        
        </div>
    </div>
</div>

Browser other questions tagged

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