How to adjust an anchor button to stand next to a`select`field in Bootstrap?

Asked

Viewed 131 times

1

The problem is that I have a button that eventually expands down a field select and should stand on the right side of it. So, instead of looking like this:

Correto

Him looks like this:

Problema

Code

The code of the help button in question is:

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

The code section you belong to is:

<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>

html css twitter-bootstrap

2 answers

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>

Adding the style with flex display can help solve the problem, but I recommend adding it in CSS and referencing the class created in the div.

  • 1

    His response helped and the button went to the side as I needed, but the help button was aligned with the top of the field and not in the middle. : ( Is there any other way to stay aligned in the middle as in the example I gave?

  • @Laylacomparin made a change in the code below I think will solve your new problem!

  • 1

    @Laylacomparin I made a small adjustment to align the items in the center.

1

Now it was even with bootstrap in the snippet, if you click on run will see that it will work as you wish :)

<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>

  • 1

    I thank Lodi, but I am a beginner and do not know how to handle bootstrap. I received prototypes ready and I have to change them. I don’t even know where to fit these changes you made. So it would be easier if it was straight into html as Fabio put. :(

  • 1

    Take a test with this issue see if it works!

  • 1

    No. gave: ( The help field is very far from the field. And I need the field to be large. Anyway, I appreciate your help. I’ll leave it at that. Since it’s only a prototype, just explain it to the developer when he goes to do it. :)

  • 1

    I edited again, I removed the margin-right and margin-left, now btn help will approach the input!

  • 1

    It even approached, but was aligned with the field name.. And not with the field itself. :(

  • hehe, now it’s gone! just test in your environment there...

Show 1 more comment

Browser other questions tagged html css twitter-bootstrap

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