Make suggestions list float

Question

Make suggestions list float

Asked 4 years, 4 months ago

Viewed 40 times

-2

I’m creating a project and I want to put a input to search users and tals... I’ve already half finished, but the list of suggestions is not "floating", as does the datalist, if someone can shed some light...

Follows code:

@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");

body {background-color: #edf1f5 !important;}

::-webkit-scrollbar {
  width: 12px;
  /* margin-left: 2px  */
}
 
::-webkit-scrollbar-thumb {
  border-radius: 8rem;
  /* background-color: rgba(255, 165, 1, .7); */
  -webkit-box-shadow: inset 6px 0 6px 6px var(--success); 
}

.form-group {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  max-width: 230px;
}

div#qyz {z-index: 9999; position: relative; top: 15px;}

div#box {
  border: 1.3px solid rgb(226, 220, 220);
  border-radius: .6rem;

  background-color: #fff;
  /* padding: 6px; */
  /* width: 250px; */

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  z-index: 9;
  box-shadow: 1px 1px 5px rgba(0,0,0,.0975);
}

div#box::after {
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  content: ' ';
  height: 0;
  position: absolute;
  top: -9px;
  width: 0;
  z-index: 3;
}

div#box div.to-se {
  position: relative;
  top: -0.61rem;
  margin: auto;

  border-left: 1.3px solid rgb(226, 220, 220);
  border-top: 1.3px solid rgb(226, 220, 220);

  width: 1rem;
  height: 1rem;
  background-color: inherit;
  z-index: 1;
  transform: rotate(45deg)
}

div#box ul.list {
  list-style: none;
  margin-bottom: 1px;
  margin-top: -13px;
  padding: 1px;
  width: 100%;
  max-height: 334px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
}

ul.list li.list-item {
  padding: 1.1px 4px 1.1px 4px;
  margin: 1px;
  width: 100%;
  /* border-bottom: 1px solid black */
}

ul.list a.item-item {
  display: inline-flex;
  text-decoration: none;
  margin: auto 1px auto 1px;
  padding: 1px
}

a.item-item img.img-item {
  max-height: 45px;
  margin-right: .5rem;
  border-radius: 100%
}

a.item-item div.abaa {
  margin-left: auto;
  margin-right: -2px; 
  padding-left: 2px;
}

div.abaa h6 {
  font-family: "Rubik", sans-serif
}

div.abaa h6:first-child {
  color: rgb(108, 117, 125);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: .5px;
}

div.abaa h6 {
  color: rgba(173, 181, 189, 1);
  font-weight: 450;
  font-size: .95rem;
  margin-top: .5px;
}

li.list-item hr {
  margin-bottom: 1px;
  margin-top: -2.9px;
  border-color: rgba(219, 219, 219, 1)
}

li.list-item:last-child hr {display: none}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-dark bg-success">
      <div class="navbar-brand">
        <div class="navbar-logo">
          <a href="/" class="logo">
            <h6 class="txt logo-head">Logo</h6>
            <h3 class="txt logo-foot">Aqui</h3>
          </a>
        </div>
      </div>
      <ul class="navbar-nav">
        <li class="nav-item active">
          <div class="form-group">
            <input class="form-control" type="text" list="suges">
          

            <div id="qyz">
              <div id="box">
                <div class="to-se"></div>

                <ul class="list">

                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki 1</h6>
                        <h6>Hokudaime 1-1</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                  <li class="list-item">
                    
                    <a href="#" class="item-item" tabindex="0">
                      
                      <img class="img-item" src="https://i.pinimg.com/564x/70/58/03/7058039a98b6cceae55142fd90dfee0a.jpg">

                      <div class="abaa">
                        <h6>Naruto Uzumaki</h6>
                        <h6>Hokudaime</h6>
                      </div>
                    </a>
                    <hr>
                  </li>
                </ul>                    
              </div>
            </div>
          </div>
        </li>
      </ul>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js" integrity="sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>
    </script>
  </body>
</html>

The expected was something like this:

What do you mean by "float"? I could not understand what you intend to do or the behavior you expected...

– hugocsl

2020/07/30 at 21:44
Like the "behavior" of the Instagram suggestion list when doing a search... There the list "fluctuates" as a modal or something like... I want something like this from the Insta

– Natan Santos

2020/07/30 at 21:56
1

already tried position: Fixed in ul ?

– hugocsl

2020/07/30 at 22:01
Yes... it was, let’s say, "bugger"

– Natan Santos

2020/07/30 at 22:12

1 answer

Browser other questions tagged html css twitter-bootstrap quest

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

by Natan Santos • 7 points · Answer 1 · 2020-07-30T23:09:13+00:00

Solved...

Follow the current CSS:

@import url("https://fonts.googleapis.com/css?family=Rubik:300,400,500,600,700");

body {background-color: #edf1f5 !important;}

::-webkit-scrollbar {
  width: 12px;
  /* margin-left: 2px  */
}
 
::-webkit-scrollbar-thumb {
  border-radius: 8rem;
  /* background-color: rgba(255, 165, 1, .7); */
  -webkit-box-shadow: inset 6px 0 6px 6px var(--success); 
}

.form-group {
  display: flex;
  justify-content: unset;
  flex-direction: column;
  align-items: center;
  width: 230px;
}

div#qyz {
  z-index: 9999;
  position: relative;
  top: 15px;
  width: 250px;
}

div#box {
  border: 1.3px solid rgb(226, 220, 220);
  border-radius: .6rem;
  background-color: #fff;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9;
  box-shadow: 1px 1px 5px rgba(0,0,0,.0975);
}

div#box::after {
  border-color: transparent transparent #fff transparent;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  content: ' ';
  height: 0;
  position: absolute;
  top: -10.1px;
  width: 0;
  z-index: 3;
}

div#box div.to-se {
  position: relative;
  top: -0.57rem;
  margin: auto;
  border-left: 1.3px solid rgb(226, 220, 220);
  border-top: 1.3px solid rgb(226, 220, 220);
  width: 1rem;
  height: 1rem;
  background-color: inherit;
  z-index: 1;
  transform: rotate(45deg);
}

div#box ul.list {
  list-style: none;
  margin-bottom: 1px;
  margin-top: -13px;
  padding: 1px;
  width: 100%;
  max-height: 334px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-x: hidden;
  overflow-y: auto;
}

ul.list li.list-item {
  padding: 1.1px 4px 1.1px 4px;
  margin: 1px;
  width: 100%;
  /* border-bottom: 1px solid black */
}

ul.list a.item-item {
  display: inline-flex;
  text-decoration: none;
  margin: auto 1px auto 1px;
  padding: 1px
}

a.item-item img.img-item {
  max-height: 45px;
  margin-right: .5rem;
  border-radius: 100%
}

a.item-item div.abaa {
  margin-left: auto;
  margin-right: -2px; 
  padding-left: 2px;
}

div.abaa h6 {
  font-family: "Rubik", sans-serif
}

div.abaa h6:first-child {
  color: rgb(108, 117, 125);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: .5px;
}

div.abaa h6 {
  color: rgba(173, 181, 189, 1);
  font-weight: 450;
  font-size: .95rem;
  margin-top: .5px;
}

li.list-item hr {
  margin-bottom: 1px;
  margin-top: -2.9px;
  border-color: rgba(219, 219, 219, 1)
}

li.list-item:last-child hr {display: none}