Alignment problem in CSS

Question

Alignment problem in CSS

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have the following navbar:

Onlyasyoucanseetheresultsdiv#isoutoflinewiththeinput#search.Code:

<divclass="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 alinhamento

asked by anonymous 27.06.2018 / 16:29

2 answers

0

I saw that you are using bootstrap Do you want to leave the div underneath in the same position as the input? If so, take this position and put col-12 in the div. If you want input next to div, put col-6 in the input and col-6 in the 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>

27.06.2018 / 16:41

How to insert equal objects or list of objects in MongoDB? How to insert multiple records with 1 insert? [duplicate]

score 2 · Accepted Answer

Place in input id="pesquisa" :

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

In this way focusing on input will adjust the width of div #resultados to 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><scriptsrc="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>