Select's dropdown direction

chef_carol

I am wondering how <select> element defines when to expand down and when expand up. I would like to create control like kendo's DropDownList, but I'm not sure how to define expand direction. Here we see that expanding down is not possible because of end of viewport, so expading direction is set to "up": Here is the opposite direction: This is standard select behavior, but viewport container is unknown in my case. How can I determine expanding...

Originally asked by Adam Mrozek on Stack Exchange (stackoverflow) (CC BY-SA 3.0).

uphilltech

Great question — answering as the UphillTech team:

You can see how far the click event is from the top and the bottom by accessing the event object. 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; }...

Full answer by Miguel Coder: https://stackoverflow.stackexchange.com/a/46523699 (CC BY-SA 3.0).

Need it done for your business? UphillTech.