1
My input suggestions are moving together with the screen, I would like when moving the screen the options are hidden. This happens in all my inputs:
#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>
I tested your answer. In your opinion, is it more feasible via UI/UX for the scroll to be blocked when the sugestion is opened or for the sugestion to move "off" from the input? It doesn’t look bad the option to lock the scroll, the problem is that my div when hiding this scroll the screen of a moved in the components
– veroneseComS
@Veronesecoms yes I imagined that the width of the scroll could cause this displacement of the content, although in the test I did not happen. You can try to make a CSS Calc() with a flex width and % to try not to let it happen... but just testing to see even... About UX/UI, it could be something bad, but not in this case in my view, since when the focus is on Select or Datalist the interaction is with the focused component and not with the page. So if the focus is on Datalist the user is attentive to it and not to the container. This in my opinion...
– hugocsl
Right, but it wasn’t clear to me in your opinion which of the two would be more viable, in my template if I choose to hide the scroll, when it clicks off it reappears and the elements move a little due to the size of the scroll, if I choose to allow the scroll the suggestions take off
– veroneseComS
I would leave it with the standard behavior, although the option I used in the response can partially solve. It would default pq as said the user interaction at the time will be like Select or Datalist etc, while it is interacting with this element it is unlikely that it scrolls the screen. So the way I see it, you wouldn’t have to treat it. Unless you can avoid this scrolling of the content when the scroll disappears and appears, so this scrolling is so "bug" when the options that stay fixed on the screen understand. I think the ideal would be to use the answer, but treat that displacement if it
– hugocsl