1

O problema é que tenho um botão que acaba por expandir para baixo de um campo select sendo que deveria ficar ao lado direito do mesmo. Assim, ao invés de se mostrar assim:

Correto

Ele se mostra assim:

Problema

Código

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

<a href="#" class="icone-ajuda" title="Ajuda" data-toggle="modal" data-target="#validaPerguntaPessoas"></a>

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

<div id="dadosProposta" class="collapse in">
<fieldset class="com-borda">

    <div class="form-group row">

        <div class="col-xs-2">
            <label class="small" for="Numero">Número</label>

            <input type="text" class="form-control text-center" value="445878545" readonly id="Numero"/>
        </div>

        <div class="col-xs-2">
            <label class="small" for="TipoDeProposta">Data Vencimento da Proposta</label>

            <input type="text" class="form-control text-center" value="18/02/2019" readonly id="Numero"/>
        </div>

        <div class="col-xs-2">
            <label class="small" for="ISSQN">Responsável ISSQN</label>

            <select class="form-control" id="ISSQN">
                <option>&nbsp;</option>
            </select>

            <a href="#" class="icone-ajuda" title="Ajuda" data-toggle="modal" data-target="#validaPerguntaPessoas"></a>
        </div>

        <div class="col-xs-2">
            <label class="small" for="ISSQN">Responsável ISSQN</label>

            <select class="form-control" id="ISSQN"><option>&nbsp;</option></select>
        </div>

    </div>

    <div class="form-group row">

        <div class="col-xs-3">
            <label class="small" for="TipoDeProposta">Nome a ser impresso na carteirinha</label>

            <input type="text" class="form-control" id="TipoDeProposta"/>
        </div>

        <div class="col-xs-4">
            <label class="small" for="TipoDeProposta">A natureza jurídica da sua empresa é MEI ou Eireli?</label>

            <select class="form-control" id="TributoFederal">
                <option>Selecione</option>
                <option>MEI</option>
                <option>Eireli</option>
            </select>
        </div>

    </div>

</fieldset>

2 Respostas 2

2
  <div class="col-xs-2">
   <label class="small" for="ISSQN">Responsável ISSQN</label>
   <div style="display: flex; align-items: center;">
       <select class="form-control" id="ISSQN"><option>&nbsp;</option></select>
       <a href="#" class="icone-ajuda" title="Ajuda" data-toggle="modal" data-target="#validaPerguntaPessoas"></a>
   </div>
  </div>

Adicionando o style com display flex pode ajudar a resolver o problema, porém indico adicionar no CSS e referenciar na div a class criada.

3
  • 1
    Sua resposta ajudou e o botão foi para o lado como eu estava precisando, mas o botão de ajuda ficou alinhado com o topo do campo e não no meio. :( Tem alguma outra saída pra ficar alinhando no meio como no exemplo que eu dei? Commented 13/02/2019 às 10:51
  • @LaylaComparin fiz uma mudança no código abaixo acho que resolvera seu novo problema!
    – Lodi
    Commented 13/02/2019 às 11:17
  • 1
    @LaylaComparin Fiz um pequeno ajuste para alinhar os itens no centro.
    – fabioxd20
    Commented 13/02/2019 às 14:47
1

Agora foi inclusive com bootstrap no snippet, se você clicar em executar vai ver que ira funcionar como você deseja :)

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div id="dadosProposta" class="collapse in">
                <fieldset class="com-borda">
                    <div class="form-group row">
                        <div class="col-xs-2">
                            <label class="small" for="Numero">Número</label>
                            <input type="text" class="form-control text-center" value="445878545" readonly id="Numero"/>
                        </div>
                        <div class="col-xs-2">
                            <label class="small" for="TipoDeProposta">Data Vencimento da Proposta</label>
                            <input type="text" class="form-control text-center" value="18/02/2019" readonly id="Numero"/>
                        </div>
                        <div class="col-xs-2">
                        <label class="small" for="ISSQN">Responsável ISSQN</label>
                            <div style="display: flex;">
                                <div >
                                  
                                  <select class="form-control" id="ISSQN"><option>&nbsp;</option></select>
                                 </div>
                                <div style="display: flex;align-items: center;justify-content: center;">
                                  <a href="#" style="" class="icone-ajuda" title="Ajuda" data-toggle="modal" data-target="#validaPerguntaPessoas">Ajuda
                                  </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <label class="small" for="ISSQN">Responsável ISSQN</label>
                            <select class="form-control" id="ISSQN"><option>&nbsp;</option></select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-xs-3">
                            <label class="small" for="TipoDeProposta">Nome a ser impresso na carteirinha</label>
                            <input type="text" class="form-control" id="TipoDeProposta"/>
                        </div>
                        <div class="col-xs-4">
                            <label class="small" for="TipoDeProposta">A natureza jurídica da sua empresa é MEI ou Eireli?</label>
                            <select class="form-control" id="TributoFederal"><option>Selecione</option><option>MEI</option>
                            <option>Eireli</option></select>
                        </div>
                    </div>
                </fieldset>
            </div>

6
  • 1
    Agradeço Lodi, mas eu sou beeem iniciante e não sei mexer com bootstrap. Eu recebi prototipos prontos e to tendo que alterar eles. Não sei nem onde encaixar essas alterações que vc fez. Por isso seria mais fácil se fosse direto no html como o fabio colocou. :( Commented 13/02/2019 às 11:26
  • 1
    Faça um teste com essa edição veja se dará certo!
    – Lodi
    Commented 13/02/2019 às 11:34
  • 1
    Deu nãao. :( O campo de ajuda fica muito distante do campo.. E eu preciso que o campo seja grande. De qualquer forma, agradeço sua ajuda. Vou deixar assim mesmo. Como é só um prototipo, é só explicar ao desenvolvedor na hora que ele for fazer. :) Commented 13/02/2019 às 11:41
  • 1
    Editei denovo, retirei os margin-right e margin-left, agora o btn ajuda vai se aproximar do input!
    – Lodi
    Commented 13/02/2019 às 11:43
  • 1
    Até aproximou, mas ficou alinhado com o titulo do campo.. E não com o campo em si. :( Commented 13/02/2019 às 12:13

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 .