我的输入建议是跟随屏幕移动

时间:2019-02-22 13:08:02

标签: html css

我的输入建议随屏幕一起移动,我想在屏幕移动时隐藏选项。这发生在我所有的输入中:

enter image description here

我正在使用Material Design Bootstrap

我该如何解决?

我认为问题比#colunaInformacoesPedidos还要近

    #linhaGeralDash {
    	margin-top: 2%;
    	padding-top: 50px;
    }
    
    .card-body {
    	padding-bottom: 0;
    	padding-left: 0;
    	margin-left: 15px;
    	padding-top: 0;
    }
    
    #colunaDesenho {
    	background-color: rgb(161, 196, 66);
    	padding-bottom: 0;
    	padding: 50px;
    }
    
    .colunaCentralizada {
    	position: relative;
    	top: 50%;
    	transform: translateY(-50%);
    }
    
    #colunaInformacoesPedidos {
    	max-height: 88vh;
    	overflow-x: hidden;
    	overflow-y: scroll;
    	padding-left: 3%;
    	padding-top: 15px;
    }
    
    .inputSearchPipe {
    	background-image: url('../../../assets/searchpipebackground.png')!important;
    	background-position: center right!important;
    	background-repeat: no-repeat!important;
    	background-size: 25px!important;
    }
<div class="container-fluid">
       <div id="linhaGeralDash" class="row">
          <div class="col-12">
             <div class="card">
                <div class="card-body">
                   <form>
                      <div class="row">
                         <div id="colunaDesenho" class="col-4">
                            <div class="colunaCentralizada">
                               <img src="../../../assets/undraw_pedidos.png" class="imgPedidos">
                               <h2 class="tituloAcao">Anúncios B2W</h2>
                               <h6 class="descricaoAcao">Acompanhe os seus anúncios da B2W, altere e pause anúncios.</h6>
                            </div>
                         </div>
                         <div id="colunaInformacoesPedidos" class="col-12 col-lg-8">
                            <div class="row">
                               <div class="col-xl-3">   
                                  <input placeholder="Nome do produto" [(ngModel)]="anunciosFiltro.name" type="text" class="form-control inputSearchPipe"
                                  name="filtra" id="filtra">
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                                  <br><!--  somente para dar rolagem -->
                               </div>
                            </div>
                         </div>
                      </div>
                   </form>
                </div>
             </div>
          </div>
       </div>
    </div>

1 个答案:

答案 0 :(得分:0)

else

如果该职位很出色,我已经添加了一个职位。尝试使用“绝对”而不是“相对”,似乎它具有“位置:固定”之类的属性