Alignment problem in CSS

Asked

Viewed 62 times

1

I have the following navbar:inserir a descrição da imagem aqui

But as you can see, the div#results is misaligned with the input#search. Code:

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

How can I solve this CSS problem?

css twitter-bootstrap alignment

  • tried to use margin-top?

  • misaligned in what sense? Greater?

  • What do you mean by misaligned? What do you want to change?

  • By misaligned I mean the width of the div#results relative to the input, I wanted both to have the same width, but even setting a width for the parent element and for the children they do not respect this new configuration.

  • The result I expected was something similar to the one used in datalist, but the use of this tag does not apply to my case, since the user click on the result it will be redirected by a link

  • Face since the problem is with CSS edit your question and include CSS as well

  • The CSS I’m using is exactly what’s in the style attribute inside the tags, I did it just to improve the visualization of the code

  • Guys, the result I want to achieve is exactly the one used on Youtube, when writing something is given the results under the search input and, precisely, the same size of it and when clicking on one of them the user is redirected to another page.

Show 3 more comments

2 answers

2


Put in the input id="pesquisa":

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

This way by focusing on input will adjust the width of the div #resultados the same width as input.

Example:

#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

I see you’re wearing bootstrap Do you want to leave the div down at the same input position? If that’s the case, take that position and put col-12 in the div. If you want input next to div, put col-6 in input and col-6 in 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>

  • Gabriela, this modification did not solve the problem, although div#results appear the same size as input#search, when it appears it takes space in the navbar extending it

  • Gabriela, what I am trying to accomplish is the type of search used on Youtube, for example, I need that when clicking on one of the results the user is redirected

Browser other questions tagged css twitter-bootstrap alignment

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