如何用JavaScript为jQuery Kendo DropdownList添加样式并动态设置.k-list-scroller高度

Got it, let's fix that rigid hardcoded height on your Kendo DropdownList's scroller and make it adjust dynamically—allowing it to expand beyond the screen height when the dropdown opens in a spot with enough space. We'll also make sure the .k-list-container and .k-list-scroller styles are applied correctly.

Step 1: Clean Up the CSS #

First, let's remove the fixed height from the scroller in CSS, since we'll handle that dynamically with JavaScript. We'll keep the necessary styles for wrapping and container behavior:

.k-list { white-space: nowrap; }
.k-list-container { 
  width: auto !important; 
  height: auto !important; 
  max-height: none !important; /* Remove any built-in height restrictions */
}
.k-list-scroller { 
  overflow-y: scroll !important; 
  /* Height will be set dynamically via JS */
}

Step 2: Add Dynamic Height Logic in the Dropdown's Open Event #

Kendo DropdownList has an open event that fires every time the dropdown expands. We'll use this to calculate how much space is available around the dropdown trigger, then set the scroller height accordingly. This way, if the dropdown opens near the top of the screen, it can stretch beyond 500px; if it's near the bottom, it won't spill off-screen unnecessarily.

Here's the full updated code:

<div id="example">
  <p> data: <select id="local"></select></p>
</div>

<script>
$(function() {
  var data = [
    { text: "Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey Grey ", value: "13" },
    { text: "Black 1", value: "1" },
    { text: "Orange 2", value: "2" },
    { text: "Black 3", value: "3" },
    { text: "Orange 4", value: "4" },
    { text: "Black 5", value: "5" },
    { text: "Orange 6", value: "6" },
    { text: "Black 7", value: "7" },
    { text: "Orange 8", value: "8" },
    { text: "Black 9", value: "9" },
    { text: "Orange 10", value: "10" },
    { text: "Black 11", value: "11" },
    { text: "Orange 12", value: "12" }
  ];

  $("#local").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    open: function(e) {
      // Get references to the dropdown's container and scroller
      var listContainer = this.list.element.closest(".k-list-container");
      var scroller = listContainer.find(".k-list-scroller");
      
      // Calculate the trigger's position relative to the viewport
      var triggerPos = this.wrapper.offset();
      var triggerBottom = triggerPos.top + this.wrapper.outerHeight();
      var viewportHeight = $(window).height();
      
      // How much space do we have below the trigger?
      var spaceBelow = viewportHeight - triggerBottom;
      // How much space above the trigger? (in case the dropdown opens upwards)
      var spaceAbove = triggerPos.top;
      
      // Use the larger of the two spaces (minus a small buffer to avoid edge overlap)
      var maxAllowedHeight = Math.max(spaceBelow, spaceAbove) - 20;
      
      // Set the scroller height—if the item list is shorter than this, it'll just fit
      scroller.css("height", maxAllowedHeight + "px");
      
      // Make sure the container doesn't restrict the scroller's height
      listContainer.css("height", "auto");
    }
  });
});
</script>

If You Want to Force the List to Expand Beyond the Screen #

If your requirement is to let the dropdown go beyond the screen height no matter where it opens (instead of fitting to available space), you can simplify the open event to set a very large height or remove the constraint entirely:

open: function(e) {
  var scroller = this.list.element.closest(".k-list-container").find(".k-list-scroller");
  // Use viewport height, or a large value like 1000px, or 'unset' to let it expand with content
  scroller.css("height", "100vh"); 
  // Or use scroller.css("height", "unset"); to let it grow as much as needed
}

Just keep in mind that using unset might create a very long list if you have hundreds of items, but it will fully meet your request of letting the height exceed the screen.

内容的提问来源于stack exchange，提问作者aditya mukherjee