kb(Dropdowns): Fix horizontal scrolling

Author: dimodi

knowledge-base/dropdowns-disable-long-text-wrap.md

@@ -38,9 +38,12 @@ By default, the dropdown items are as wide as the dropdown. Text wrapping of lon
 
 ## Solution
 
-1. Set a custom class in the component's `PopupSettings`.
-1. Apply a `white-space: nowrap;` style to the custom class.
-1. If a `PopupSettings` tag was not present until this point, also set a `Height`, otherwise it will change from `"200px"` to `"auto"`.
+One option is to [set a larger `Width` in the component's `PopupSettings`](#see-also). The algorithm below assumes that this is not the preferred approach.
+
+1. Set a custom class in the [component's `PopupSettings`](#see-also).
+1. Apply a `white-space: nowrap` style to the custom class.
+1. (optional) Allow horizontal scrolling with an `overflow-x: auto` style on `.k-list-content`.
+1. If a `PopupSettings` tag was not present before, also set a `Height`, otherwise it will change from `"200px"` to `"auto"`.
 
 >caption Disable text wrapping and overlapping of long dropdown items
 
@@ -71,8 +74,16 @@ By default, the dropdown items are as wide as the dropdown. Text wrapping of lon
 </TelerikComboBox>
 
 <style>
-    .no-wrap {
+    .no-wrap .k-list-content {
+        /* prevent text wrapping */
         white-space: nowrap;
+        /* allow horizontal scrolling */
+        overflow-x: auto;
+    }
+
+    .no-wrap .k-list-content li {
+        /* expand items beyond 100% for proper selected and hover styles */
+        width: max-content;
     }
 </style>