Avoid weird text wrap in toggle field previews #2244

getkirby · Oct 23, 2019 · ebd5c63 · ebd5c63
1 parent 272e333
commit ebd5c63
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/panel/src/components/Forms/Previews/ToggleFieldPreview.vue b/panel/src/components/Forms/Previews/ToggleFieldPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <k-input
     v-model="value"
-    :text="field.text"
+    :text="text"
     class="k-toggle-field-preview"
     type="toggle"
     @input="$emit('input', $event)"
@@ -13,6 +13,12 @@ export default {
   props: {
     field: Object,
     value: Boolean,
+    column: Object
+  },
+  computed: {
+    text() {
+      return this.column.text !== false ? this.field.text : null;
+    }
   }
 }
 </script>
@@ -23,6 +29,8 @@ export default {
   display: flex;
   height: 38px;
   cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .k-toggle-field-preview .k-toggle-input-label {
   padding-left: .5rem;