CODEWITHSUNDEEP
javascripthtmlselectkendo-dropdown
Adam Mrozek
Adam Mrozek

Reputation: 1490

Select's dropdown direction

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": expandup

Here is the opposite direction: enter image description here

This is standard select behavior, but viewport container is unknown in my case. How can I determine expanding direction using javascript?

Upvotes: 3

Views: 10837

Answers (2)

Miguel Coder
Miguel Coder

Reputation: 1949

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;
}
<div id="daDiv"></div>
<div id="pretendSelect"></div>

Upvotes: 0

TidyDev
TidyDev

Reputation: 3668

The behaviour of the select element is controlled by the browser. A very similar question was asked here with an accurate answer Select drop-down list possible to "Drop-Up"

You can't directly control above or below placement of the select expanded box.

One thing you can control in a select element is the amount of items in the drop down box. This may help since you could force a large enough items in the box to force it above. However it may look visually ugly.

<select size="number">

Upvotes: 0

Related Questions