html - Problem with fixed search autocomplete box in fixed navbar with bootstrap

Question

Welcome To Ask or Share your Answers For Others

html - Problem with fixed search autocomplete box in fixed navbar with bootstrap

posted Feb 19, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Problem with fixed search autocomplete box in fixed navbar with bootstrap

I have this issue, i want to my autocomplete box have the same width of the entire search box. something like this using the class col-xs-11 of Bootstrap:

if i set the position "relative" look like this (all keeps inside the navbar):

but when i set the autocomplete box position to fixed look like this (the width changes):

here is my code:

<div id="buscqueda" class="navbar-search smallsearch col-sm-8 col-xs-11">
                    <div class="row"> 
                        <input class="navbar-input col-xs-10" type="" placeholder="Buscar productos" name=""> <button class="navbar-button col-xs-1"> <svg width="15px" height="15px">
                                <path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
                            </svg> </button> 
                        </div>
                        <div class="autocom-box row">
                            <li class="col-xs-11">producto 1</li>
                            <li class="col-xs-11">producto 2</li>
                            <li class="col-xs-11">producto 3</li>
                            <li class="col-xs-11">producto 4</li>
                            
                       </div>
                    
                </div>

here is the css:

    .autocom-box li{
  background-color: white;
  color: black;
  padding: 10px 20px;
  
}

.autocom-box{
  position: fixed;
  z-index: 9999;
  border-top: 1px solid black;
  box-shadow: 4px 4px 8px -1px black;
  
  
}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-02-19T04:05:11+0000

Can you please check the below code? Hope it will work for you. We removed unnecessary bootstrap classes from the input, button, and li tag. Then we gave position: absolute; and width: 100%; in .autocom-box instead of position fixed.

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <style>
    main {
      padding: 15px;
      background: #000;
    }

    .navbar-search {
      position: relative;
      padding: 0px 15px;
    }

    .navbar-input {
      width: calc(100% - 80px);
    }

    .navbar-button {
      width: 75px;
    }

    .autocom-box ul {
      background: #fff;
    }

    .autocom-box li {
      background-color: white;
      color: black;
      padding: 10px 20px;

    }

    .autocom-box {
      position: absolute;
      z-index: 9999;
      border-top: 1px solid black;
      box-shadow: 4px 4px 8px -1px black;
      width: 100%;
    }
  </style>
</head>

<body>
  <main>
    <div id="buscqueda" class="navbar-search smallsearch">
      <div class="col-sm-8 col-xs-11">
        <div class="row">
          <input class="navbar-input" type="" placeholder="Buscar productos" name="">
          <button class="navbar-button"> <svg width="15px" height="15px">
              <path
                d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 ">
              </path>
            </svg> </button>
        </div>
        <div class="autocom-box row">
          <ul>
            <li>producto 1</li>
            <li>producto 2</li>
            <li>producto 3</li>
            <li>producto 4</li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
  </main>
</body>

</html>

Categories

html - Problem with fixed search autocomplete box in fixed navbar with bootstrap

html - Problem with fixed search autocomplete box in fixed navbar with bootstrap

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags