direction de la liste déroulante de Select

Question

Je me demande comment <select> élément définit quand étendre et quand étendre.

Je voudrais créer un contrôle comme DropDownList de Kendo, mais je ne suis pas sûr de savoir comment définir la direction d'expansion.

Ici, nous voyons que l'élargissement vers le bas est impossible en raison de la fin de fenêtre, de sorte que la direction expading est réglé sur « up »:

est ici le sens opposé:

Ce standard sélectionnez le comportement, mais le conteneur viewport est inconnu dans mon cas. Comment puis-je déterminer la direction d'expansion en utilisant javascript?

Answer 1

Vous pouvez voir dans quelle mesure l'événement click se situe entre le haut et le bas en accédant à l'objet événement.

var pretendSelect = document.querySelector('#pretendSelect'); 
 
var daDiv = document.querySelector('#daDiv') 
 

 
daDiv.addEventListener('click', function(ev){ 
 
    
 
    pretendSelect.style.display = "block"; 
 
    pretendSelect.style.left = ev.clientX + 'px'; 
 
    
 
    if(ev.clientY > 120){ 
 
    pretendSelect.style.top = ev.clientY - 80 + 'px'; 
 
    
 
    } else { 
 
    pretendSelect.style.top = ev.clientY + 'px'; 
 
    } 
 
    
 
    console.log(ev.clientX); 
 
    console.log(ev.clientY); 
 
})

#daDiv { 
 
    background:red; 
 
    width:200px; 
 
    height: 200px; 
 
    left:0; 
 
    top:0; 
 
} 
 

 
#pretendSelect { 
 
    height:80px; 
 
    position:absolute; 
 
    background:blue; 
 
    width:50px; 
 
    z-index:1; 
 
    top:0; 
 
    display:none; 
 
}

<div id="daDiv"></div> 
 
<div id="pretendSelect"></div>

Answer 2

Le comportement de l'élément de sélection est commandée par le navigateur. Une question très similaire a été posée ici avec une réponse précise Select drop-down list possible to "Drop-Up"

Vous ne pouvez pas contrôler directement au-dessus ou en dessous du placement de la boîte agrandie sélectionnée.

Une chose que vous pouvez contrôler dans un élément de sélection est la quantité d'éléments dans la liste déroulante. Cela peut aider puisque vous pouvez forcer un assez grand nombre d'objets dans la boîte pour le forcer au-dessus. Cependant, il peut paraître visuellement moche.

<select size="number">