Merge pull request #870 from lokesh-sagi125/develop

make ui menu accept maxWidth to avoid text truncation
learningequality · Jan 28, 2025 · 7d0726a · 7d0726a
2 parents a2c487b + fbc72c1
commit 7d0726a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/lib/KDropdownMenu.vue b/lib/KDropdownMenu.vue
@@ -21,6 +21,7 @@
         ref="menu"
         :options="options"
         :hasIcons="hasIcons"
+        :maxWidth="maxWidth"
         @select="handleSelection"
       />
     </UiPopover>
@@ -83,6 +84,11 @@
         type: Boolean,
         default: false,
       },
+      /** Maximum width for the dropdown menu*/
+      maxWidth: {
+        type: [Number, String],
+        default: null,
+      },
       /**
        * The position of the dropdown relative to the button
        */

diff --git a/lib/keen/UiMenu.vue b/lib/keen/UiMenu.vue
@@ -8,6 +8,7 @@
     lazy
 
     :class="classes"
+    :style="getWidth"
   >
     <UiMenuOption
       v-for="(option, index) in options"
@@ -59,6 +60,10 @@
         type: Boolean,
         default: false,
       },
+      maxWidth: {
+        type: [Number,String],
+        default: null,
+      },
       iconProps: Object,
       hasSecondaryText: {
         type: Boolean,
@@ -101,6 +106,15 @@
           'has-secondary-text': this.hasSecondaryText,
         };
       },
+      getWidth() {
+        if (this.maxWidth){
+          return {
+            maxWidth: this.maxWidth && 
+              (typeof this.maxWidth === 'number' ? `${this.maxWidth}px` : this.maxWidth)
+          };
+        }
+        return {};
+      },
       activeOutline() {
         return this.isActive ? this.$coreOutline : {};
       },