1

Tenho a seguinte navbar:inserir a descrição da imagem aqui

Só que como podem ver a div#resultados está desalinhada com o input#pesquisa. Código:

<div class="container-fluid primary-bgcolor p-3">
        <div class="row align-items-center">
            <div class="col-2">
                <a class="text-white mb-0">
                    <span class="ml-2 d-none d-sm-inline d-xl-none">Nome do Site</span>
                </a>
            </div>
            <div class="col-4" style="width: 100%;">
                <input class="form-control primary-fontcolor" type="text" name="pesquisa" id="pesquisa" placeholder="Pesquisar">
                <div id="resultados" class="primary-bgcolor" style="position: absolute; z-index: 2; width: 100%; margin-top: 20px;"></div>
            </div>
        </div>
    </div>

Como posso resolver este problema de CSS?

8
  • tentou usar margin-top? 27/06/2018 às 14:32
  • desalinhada em que sentido? Maior? 27/06/2018 às 14:32
  • O que vc quer dizer com desalinhado? O que vc quer alterar?
    – hugocsl
    27/06/2018 às 14:45
  • Com desalinhado quero dizer a largura da div#resultados em relação à input, queria que ambas tivessem a mesma largura, porém mesmo setando um width para o elemento pai e para os filhos eles não respeitam esta nova configuração. 27/06/2018 às 15:04
  • O resultado que eu esperava era algo parecido com o usado em datalist, porém o uso desta tag não se aplica ao meu caso, já que ao usuário clicar no resultado ele será redirecionado por um link 27/06/2018 às 15:06

2 Respostas 2

2

Coloque no input id="pesquisa":

onfocus="this.nextElementSibling.style.width = this.offsetWidth+'px'"

Desta forma ao focar no input irá ajustar a largura da div #resultados à mesma largura do input.

Exemplo:

#resultados{
   background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container-fluid primary-bgcolor p-3">
        <div class="row align-items-center">
            <div class="col-2">
                <a class="text-white mb-0">
                    <span class="ml-2 d-none d-sm-inline d-xl-none">Nome do Site</span>
                </a>
            </div>
            <div class="col-4" style="width: 100%;">
                <input onfocus="this.nextElementSibling.style.width = this.offsetWidth+'px'" class="form-control primary-fontcolor" type="text" name="pesquisa" id="pesquisa" placeholder="Pesquisar">
                <div id="resultados" class="primary-bgcolor" style="position: absolute; z-index: 2; width: 100%; margin-top: 20px;">abc</div>
            </div>
        </div>
    </div>

0

Vi que você está usando bootstrap Você quer deixar a div embaixo na mesma posição do input? Caso seja isso tire esse position e coloca col-12 na div. Caso queira input ao lado de div, coloca col-6 no input e col-6 na div.

<div class="container-fluid primary-bgcolor p-3">
        <div class="row align-items-center">
            <div class="col-2">
                <a class="text-white mb-0">
                    <span class="ml-2 d-none d-sm-inline d-xl-none">Nome do Site</span>
                </a>
            </div>
            <div class="col-4" style="width: 100%;">
                <input class="form-control primary-fontcolor" type="text" name="pesquisa" id="pesquisa" placeholder="Pesquisar">
                <div id="resultados" class="col-12 primary-bgcolor" style=" z-index: 2; width: 100%; margin-top: 20px; background:#c0c0c0;">Teste</div>
            </div>
        </div>
    </div>
2
  • Gabriela, esta modificação não resolveu o problema, apesar da div#resultados aparecer do mesmo tamanho do input#pesquisa, ao aparecer ela toma espaço na navbar alargando-a 27/06/2018 às 15:02
  • Gabriela, o que estou tentando realizar é o tipo de pesquisa utilizado no Youtube, por exemplo, eu preciso que ao clicar em um dos resultados o usuário seja redirecionado 27/06/2018 às 15:47

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 .