As always show search field

Question

As always show search field

Navigation

#1 by (1 votes)

2

I have a form where I have a search field, this field is only visible when the user clicks on the image of the existing magnifying glass and the field is displayed a line below my layout, I would like to leave it always visible and next to the icon of the magnifying glass, I made some modifications but nothing to be successful in what I need.

What I did was, I left the search field visible:

.navbar .search-form {
position: absolute;
right: 0;
z-index: 20;
float: right;
display: block;
top: 40px;

}

And I tried to change the position by changing the position of the position, trying to position it higher, without success.

The form code is this:

        <div class="navbar-collapse collapse"> 
      <!-- Stat Search -->
      <div class="search-side"> <a href="#" class="show-search"><i class="icon-search-1"></i></a>
        <div class="search-form">
          <form autocomplete="off" role="search" method="get" class="searchform" action="#">
            <input type="text" value="" name="s" id="s" placeholder="Buscar...">
          </form>
        </div>
      </div>
      <!-- Fim da Busca --> 
      <!-- Início Links Superiores -->
      <ul class="nav navbar-nav navbar-right">
        <li> <a href="catalogos.php">catálogos e manuais</a> </li>
        <li> <a href="cores.php">cores e linha</a> </li>
        <li> <a href="garantia.php">garantia e uso</a> </li>
      </ul>
      <!-- Fim Links Superiores --> 
    </div>

The css of this is this:

.search-side {
    position: relative;
    float: right;
    top: 19px;
    right: -15px;
    transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}

.show-search {
    position: relative;
    display: block;
    float: right;
}

.show-search i {
    font-size: 1.2em !important;
    display: block;
    color: #aaa;
    width: 36px;
    height: 36px;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    line-height: 36px;
    text-align: center;
    background-color: #f2f2f2;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.show-search:hover i {
    color: #000;
}

/* Campo de Busca*/
.navbar .search-form {
    position: absolute;
    right: 0;
    z-index: 20;
    float: right;
    display: block;
    top: 40px;
}

.navbar .search-form:before {
    background-color: #ccc;
    top: -2px;
    content: '';
    display: block;
    height: 4px;
    width: 4px;
    z-index: 20;
    right: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
}

.navbar .search-form form input {
    border: 2px solid #ccc;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    padding: 5px 14px;
    z-index: 22;
    color: #9d9d9d;
    box-shadow: none;
    -o-box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    outline: none;
    box-shadow: none;
}

.navbar .search-form form {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 20;
}

The image of the page is this:

css

asked by anonymous 06.11.2015 / 20:52

1 answer

Which event shows whether the android keyboard is active or not? Hide the WebView address bar

score 1 · Accepted Answer

Your result will not be fetched since they have the position property set to absolute .

But what does it mean?

It means that in relation to the "parent" div it will have an absolute positioning with a distance of X px from the top and Y px from the side, so it is always appearing below the magnifying glass icon. The css that is causing this problem is this one:

.navbar .search-form {
    position: absolute;
    right: 0;
    z-index: 20;
    float: right;
    display: block;
    top: 40px;
}

See that my fiddle where I did with the result you want.

To solve your problem, you can define the div that encompasses the search icon and the input of the form, with display:inline-block so that it has the width of the two blocks, not the total width of the parent div. / p>

Then make the same inline-block definition for each of the two elements, the magnifying glass icon (or in my example, the 'search') and the form input.

The important thing to remember is to remove position:absolute because it's what's causing the problem.