1

Minhas sugestões do input estão se movimentando em conjunto com a tela, gostaria que ao movimentar a tela as opções se escondessem. Isso acontece em todos os meus inputs:

inserir a descrição da imagem aqui

    #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 Resposta 1

3

Isso é um "bug" do Chrome conhecido e já documentado como vc pode consultar aqui: https://bugs.chromium.org/p/chromium/issues/detail?id=849616

Repare que no Chrome, mesmo vc clicando no scroll o campo não perde o focus, ai quando vc rola a página os options continuam "fixos" na página. Já no FireFox ao clicar no Scroll é como se o campo perdesse o focus.

inserir a descrição da imagem aqui

Um workaround que vc pode fazer apenas com CSS é remover o scroll do container caso algum elemento seja focado. Para isso vc vai usar a pseudo classe :focus-within no container e fazer um overflow-y: hidden; nele.

Não funciona no IE ou Edge, link da documentação: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

Veja o resultado:

inserir a descrição da imagem aqui

Segue o código da imagem acima:

Teste em página toda para vc visualizar melhor

#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;
}

#colunaInformacoesPedidos:focus-within {
  overflow-y: hidden;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
  
<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">
                                  <input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

                                  <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>

4
  • Eu testei sua resposta. Na sua opinião, é mais viável via UI/UX que o scroll seja bloqueado quando o sugestion for aberto ou que o sugestion se movimente "descolando" do input? Não parece ser ruim a opção de bloquear o scroll, o problema é que minha div quando esconde esse scroll a tela da uma movimentada nos componentes 22/02/2019 às 16:04
  • 1
    @VeroneseComS sim imaginei que a largura do scroll poderia ocasionar esse deslocamento do conteúdo, apesar que no teste que fiz isso não aconteceu. Vc pode tentar fazer um calc() com CSS e uma largura em flex e % para tentar não deixar isso acontecer... mas só testando pra ver mesmo... Sobre o UX/UI, poderia ser sim algo ruim, mas não nesse caso ao meu ver, já que quando o foco é no Select ou Datalist a interação é com o componente focado e não com a página. Então se o foco está no Datalist o usuário está atento a ele e não ao container. Isso na minha opinião...
    – hugocsl
    22/02/2019 às 16:10
  • Certo, mas não ficou claro pra mim na sua opinião qual dos dois seria mais viável, no meu template se eu escolher esconder o scroll, quando clica fora ele reaparece e os elementos se mechem um pouco devido ao tamanho do scroll, se eu escolho permitir o scroll as sugestões se descolam 22/02/2019 às 16:19
  • 1
    Eu deixaria com o comportamento padrão, apesar de que a opção que usei na resposta pode resolver parcialmente. Deixaria padrão pq como disse a interação do usuário no momento será como o Select ou Datalista, etc, enquanto ele está interagindo com esse elemento é pouco provável que ele role a tela. então ao meu ver vc não precisaria tratar isso. A não ser que vc consiga evitar esse deslocamento do conteúdo quando o scroll some e aparece, por esse deslocamento é tão "bug" quando as opções que ficam fixas na tela entende. Acho que o ideal seria usar a resposta, mas tratar esse deslocamento se der
    – hugocsl
    22/02/2019 às 16:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .