Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

btn-group com select não funciona

Referente ao curso Bootstrap: criação de uma single-page responsiva

por Roger Rayner
| 51.5k xp | 60 posts

Boa noite,

Preciso criar um botão de central do assinante. Só que o usuário ao clicar no botão deve aparecer uma opção para que ele selecione qual a cidade que ele quer ser direcionado. Fiz o código abaixo (pegando exemplos da internet, pq não sabia qual a melhor forma para fazer isso).

<div class="btn-group">
  <button type="button" class="btn btn-info btn-central-assinante dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="glyphicon glyphicon-user"></span><span> Central do Assinante</span><span class="caret"></span>
  </button>
  <ul class="dropdown-menu dropdown-background-color">
        <li>            
            <div class="navbar-area-cliente">                        
                    <form class="form-inline">
                      <div class="form-group">
                        <label for="selectCidade">Cidade:</label>
                            <select class="form-control" id="selectCidade" style="min-width: 70px">
                                <option value="1">Cidade 1</option>
                                <option value="2">Cidade 2</option>
                            </select>
                      </div> 
                    </form>
                    <fieldset class="form-group" style="margin: 10px">
                        <button type='button' class='btn btn-primary btn-central-assinante-acessar btn-block' style="margin-top:10px">Acessar</button>
                    </fieldset>

            </div>
        </li>            
  </ul>
</div>

O botão fica ok, o select fica ok... só que ao clicar no select para poder selecionar a cidade fecha o dropdown do botão principal. Alguém sabe como fazer isso (se a forma que eu fiz não for a melhor podem dar sugestões de outras formas de fazer, porque ainda estou fazendo os cursos aqui no Alura de front-end e não sei muita coisa).

Fico no aguardo.

4 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Roger tudo bom?

Consegue subir o resto do seu código em um repositório no GitHub e me mandar o link? \o

por Roger Rayner
| 51.5k xp | 60 posts

Bom dia @Mario Souto,

Tentei simplificar ao máximo o código e coloquei no repositório abaixo. Deixei apenas o navbar e a row que fica o botão (deixei a nav pq alguns exemplos na internet dava conflito com essa minha nav, acho que eu não estava usando os seletores css corretos). O botão que menciono nesse forum é o central assinante.

https://github.com/rogerrayner/aluraexample.git

Espero que vc consiga me ajudar.

Obrigado.

solução!
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Fala Roger tudo bom?

Essa interação é um pouco complexa e talvez seja mais interessante você fazer os eventos por você mesmo utilizando CSS e Javascript para ao click fazer as opções aparecerem e utilizando Javascript, quando a pessoa clicar no botão Acessar você pode pegar o valor do select e mandar a pessoa para alguma url.

Porém, utilizando o bootstrap uma forma mais fácil de fazer isso seria utilizando os popovers. http://getbootstrap.com/javascript/#popovers-examples

E para deixar a estilização do select no formato que o bootstrap oferece você pode utilizar algo assim:

<form action="" class="col-md-12">
    <div class="form-group">
      <label for="selectCidade">Cidade:</label>
      <select class="form-control" id="selectCidade">
        <option value="1">Janaúba</option>
        <option value="2">Jaíba</option> 
    </select>
    </div>
</form>

Se precisar de alguma referência, tem o link da documentação do bootstrap: http://getbootstrap.com/components/#input-groups-basic

Espero ter ajudado :)

por Roger Rayner
| 51.5k xp | 60 posts

Obrigado @Mario, consegui fazer funcionar com o popover. :)