1

O problema é que tenho um botão que fica acima de um campo input sendo que deveria ficar ao lado esquerdo. Assim, ao invés de se mostrar assim:

Correto

Ele se mostra assim:

Problema

Código

O código do botão em questão é:

<a href="#" class="icone-excluir"></a>

A seção de código a qual pertence é:

                    </div>
                        <div class="row">
                            <a href="#" class="icone-excluir"></a>
                        </div>
                    <div class="form-group row">
                        <div class="col-xs-2">
                            <label class="small" for="CPFSocio">CPF</label>
                            <input type="text" class="form-control text-center" id="CPFSocio" value="956.555.888-04"/>
                        </div>
                        <div class="col-xs-3">
                            <label class="small" for="NomeSocio">Nome</label>
                            <input type="text" class="form-control text-center" id="NomeSocio" value="RONALDO NEVES SANTOS"/>
                        </div>
                        <div class="col-xs-2">
                            <label class="small" for="TelefoneSocio">Telefone</label>
                            <input type="text" class="form-control text-center" id="TelefoneSocio" value="31 2222-2522"/>
                        </div>
                        <div class="col-xs-2">
                            <label class="small" for="CelularSocio">Celular</label>
                            <input type="text" class="form-control text-center" id="CelularSocio" value="31 99999-8999"/>
                        </div>
                        <div class="col-xs-3">
                            <label class="small" for="EmailSocio">E-mail</label>
                            <input type="text" class="form-control text-center" id="EmailSocio" value="[email protected]"/>
                        </div>
                        <div class="form-group row">
                        </div>
                    </div>

Estou iniciando agora, então não sei mexer bem em CSS e Bootstrap. Se puderem explicar a solução dentro do HTML, eu agradeço.

EDIT: Consegui resolver da seguinte forma:

                        <div class="col-xs-1" style="width: 2%; !important ">
                            <a href="#" class="icone-excluir"></a>
                        </div>

Como eu não sabia como alterar no CSS, alterei no próprio html e declarei o style como important para sobrepor o css neste caso. :)

2
  • O correto mesmo seria vc seguir a documentação Oficial do Form do BS3, getbootstrap.com/docs/3.4/css/#forms-inline só que como vc tem muitos campos na mesma linha vai acabar quebrando a linha, o ideal talvez seria vc dividir esses inputs em dois form-groups ou algo assim... Ou então vc pode fazer na base do jeitinho como sugerido nas respostas (não que sejam erradas, mas esse é um problema de se usar frameworks, quase sempre precisamos desse jeitinhos para fazer dar certo)
    – hugocsl
    Commented 18/02/2019 às 11:31
  • Vc tá usando Bootstrap 3? Qual a largura desse ícone?
    – Sam
    Commented 18/02/2019 às 12:10

3 Respostas 3

0

O correto seria você disponibilizar a tag <a> ao lado de <input>:

                <div class="form-group row">
                    <div class="col-xs-2">
                        <label class="small" for="CPFSocio">CPF</label>
                        <a href="#" class="icone-excluir"></a><input type="text" class="form-control text-center" id="CPFSocio" value="956.555.888-04"/>
                    </div>
                    <div class="col-xs-3">
                        <label class="small" for="NomeSocio">Nome</label>
                        <input type="text" class="form-control text-center" id="NomeSocio" value="RONALDO NEVES SANTOS"/>
                    </div>
                    <div class="col-xs-2">
                        <label class="small" for="TelefoneSocio">Telefone</label>
                        <input type="text" class="form-control text-center" id="TelefoneSocio" value="31 2222-2522"/>
                    </div>
                    <div class="col-xs-2">
                        <label class="small" for="CelularSocio">Celular</label>
                        <input type="text" class="form-control text-center" id="CelularSocio" value="31 99999-8999"/>
                    </div>
                    <div class="col-xs-3">
                        <label class="small" for="EmailSocio">E-mail</label>
                        <input type="text" class="form-control text-center" id="EmailSocio" value="[email protected]"/>
                    </div>
                    <div class="form-group row">
                    </div>
                </div>
6
  • @hugocsl como coloco esse efeito visual como fez na tag a e input?
    – ElvisP
    Commented 18/02/2019 às 11:14
  • `` vi aqui, obg
    – ElvisP
    Commented 18/02/2019 às 11:14
  • 1
    Isso mesmo coloca o texto entre ` `, ou então vc seleciona o texto e clica nesse btn prntscr.com/mmmmto
    – hugocsl
    Commented 18/02/2019 às 11:15
  • Até tentei fazer da sua forma, mas o X fica na frente do titulo do input, e ele tem que vir ao lado esquedo do input e não ao lado do titulo. :( Commented 18/02/2019 às 11:50
  • você precisa aplicar estilização CSS, pois o formulário está se adaptando de acordo com as classes do Bootstrap.
    – ElvisP
    Commented 18/02/2019 às 12:13
0

Pode posicionar o ícone de forma absoluta dentro da row do form-group, bastando adicionar um padding-left com um valor um pouco maior do que a largura do ícone e posicionar com left e bottom. Importante adicionar um z-index também para que o ícone não fique por baixo da row.

É preciso também que a row tenha position: relative para acomodar o ícone com position: absolute:

.container{
   background: #f5f5f5;
}

.row{
   position: relative;
}

.icone-excluir{
   position: absolute;
   left: 22px;
   bottom: 25px;
   width: 15px;
   height: 15px;
   display: inline-block;
   background-image: url(http://cdn.onlinewebfonts.com/svg/img_377892.png);
   background-size: contain;
   z-index: 1;
}

.p-left{
   padding-left: 32px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
   <div class="row">
        <div class="form-group row p-left">
            <a href="#" class="icone-excluir"></a>
            <div class="col-xs-2">
                <label class="small" for="CPFSocio">CPF</label>
                <input type="text" class="form-control text-center" id="CPFSocio" value="956.555.888-04"/>
            </div>
            <div class="col-xs-3">
                <label class="small" for="NomeSocio">Nome</label>
                <input type="text" class="form-control text-center" id="NomeSocio" value="RONALDO NEVES SANTOS"/>
            </div>
            <div class="col-xs-2">
                <label class="small" for="TelefoneSocio">Telefone</label>
                <input type="text" class="form-control text-center" id="TelefoneSocio" value="31 2222-2522"/>
            </div>
            <div class="col-xs-2">
                <label class="small" for="CelularSocio">Celular</label>
                <input type="text" class="form-control text-center" id="CelularSocio" value="31 99999-8999"/>
            </div>
            <div class="col-xs-3">
                <label class="small" for="EmailSocio">E-mail</label>
                <input type="text" class="form-control text-center" id="EmailSocio" value="[email protected]"/>
            </div>
            <div class="form-group row">
            </div>
        </div>
        <div class="form-group row p-left">
            <a href="#" class="icone-excluir"></a>
            <div class="col-xs-2">
                <label class="small" for="CPFSocio">CPF</label>
                <input type="text" class="form-control text-center" id="CPFSocio" value="956.555.888-04"/>
            </div>
            <div class="col-xs-3">
                <label class="small" for="NomeSocio">Nome</label>
                <input type="text" class="form-control text-center" id="NomeSocio" value="RONALDO NEVES SANTOS"/>
            </div>
            <div class="col-xs-2">
                <label class="small" for="TelefoneSocio">Telefone</label>
                <input type="text" class="form-control text-center" id="TelefoneSocio" value="31 2222-2522"/>
            </div>
            <div class="col-xs-2">
                <label class="small" for="CelularSocio">Celular</label>
                <input type="text" class="form-control text-center" id="CelularSocio" value="31 99999-8999"/>
            </div>
            <div class="col-xs-3">
                <label class="small" for="EmailSocio">E-mail</label>
                <input type="text" class="form-control text-center" id="EmailSocio" value="[email protected]"/>
            </div>
            <div class="form-group row">
            </div>
        </div>
    </div>
</div>

1
  • Agradeço a ajuda, coloquei um edit na pergunta informando como eu consegui resolver. :) Commented 18/02/2019 às 12:51
0

Você está utilizando uma div class="row" e assim criando uma linha e deixando o "X" acima do campo. Para resolver é simples:

                <div class="form-group row">
                    <div class="col-xs-1 div-icone-excluir">
                       <a href="#" class="icone-excluir"></a>
                    </div>
                    <div class="col-xs-1">
                        <label class="small" for="CPFSocio">CPF</label>
                        <input type="text" class="form-control text-center" id="CPFSocio" value="956.555.888-04"/>
                    </div>
                    <div class="col-xs-3">
                        <label class="small" for="NomeSocio">Nome</label>
                        <input type="text" class="form-control text-center" id="NomeSocio" value="RONALDO NEVES SANTOS"/>
                    </div>
                    <div class="col-xs-2">
                        <label class="small" for="TelefoneSocio">Telefone</label>
                        <input type="text" class="form-control text-center" id="TelefoneSocio" value="31 2222-2522"/>
                    </div>
                    <div class="col-xs-2">
                        <label class="small" for="CelularSocio">Celular</label>
                        <input type="text" class="form-control text-center" id="CelularSocio" value="31 99999-8999"/>
                    </div>
                    <div class="col-xs-3">
                        <label class="small" for="EmailSocio">E-mail</label>
                        <input type="text" class="form-control text-center" id="EmailSocio" value="[email protected]"/>
                    </div>
                    <div class="form-group row">
                    </div>
                </div>

Dessa forma você apenas cria uma coluna na mesma linha que os campos. Deixando como queria!

Edit 1

Conforme a dúvida "Eu até tinha tentado dessa forma, mas o icone ainda continua na parte superior, desta vez alinhado com os titulos dos inputs e fica um espaço enorme entre o X e o primeiro input":

Você consegue arrumar com o css:

div.div-icone-excluir{
    height: 10em;
    position: relative
}

div.div-icone-excluir a {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
}

Trabalhando com padding e margin você consegue resolver isso também.

3
  • Eu até tinha tentado dessa forma, mas o icone ainda continua na parte superior, desta vez alinhado com os titulos dos inputs e fica um espaço enorme entre o X e o primeiro input. Eu preciso que o X fique alinhado no meio do input e não tenha esse espaço todo no começo. :( Commented 18/02/2019 às 11:47
  • Agradeço a ajuda, coloquei um edit na pergunta informando como eu consegui resolver. :) Commented 18/02/2019 às 12:51
  • você pode optar por usar display: inline-block ao invés de position, assim não tem necessidade de muita manobra para o resultado esperado.
    – ElvisP
    Commented 18/02/2019 às 13:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .