Edit SuggestInput to add scrollbar on long item list

minjk-bl · minjk-bl · commit dbef5694c4bc · 2023-07-07T11:29:43.000+09:00
diff --git a/visualpython/css/root.css b/visualpython/css/root.css
@@ -378,6 +378,21 @@ button.vp-button {
     background: #C4C4C4;
 }
 
+/* Scrollbar vertical only */
+.vp-scrollbar-vertical {
+    overflow-x: hidden;
+    overflow-y: auto;
+    --webkit-mask-position: left top;
+}
+.vp-scrollbar-vertical::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+} 
+.vp-scrollbar-vertical::-webkit-scrollbar-thumb {
+    border: 0.3px solid #C4C4C4;
+    background: #C4C4C4;
+}
+
 /* Scrollbar horizontal */
 .vp-scrollbar-horizontal {
     overflow-x: auto;
diff --git a/visualpython/js/com/component/SuggestInput.js b/visualpython/js/com/component/SuggestInput.js
@@ -168,6 +168,8 @@ define([
                     $(this).select();
                     $(com_util.formatString(".{0}", that.uuid)).autocomplete('search', $(com_util.formatString(".{0}", that.uuid)).val());
                 }).autocomplete('instance')._renderItem = function(ul, item) {
+                    $(ul).addClass('vp-scrollbar-vertical');
+                    $(ul).css('max-height', '250px');
                     if (item.dtype != undefined) {
                         return $('<li>').attr('data-value', item.value)
                             .append(`<div class="vp-sg-item">${item.label}<label class="vp-gray-text vp-cursor">&nbsp;| ${item.dtype}</label></div>`)
