Browse Source

fix(nc-gui): textarea height issue in form view

pull/7664/head
Ramesh Mane 9 months ago
parent
commit
669b6dd94b
  1. 6
      packages/nc-gui/components/cell/TextArea.vue
  2. 2
      packages/nc-gui/components/smartsheet/Cell.vue
  3. 8
      packages/nc-gui/components/smartsheet/Form.vue

6
packages/nc-gui/components/cell/TextArea.vue

@ -226,7 +226,7 @@ watch(inputWrapperRef, () => {
v-else-if="editEnabled && !isVisible" v-else-if="editEnabled && !isVisible"
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
rows="4" :rows="isForm ? 5 : 4"
class="h-full w-full outline-none border-none nc-scrollbar-lg" class="h-full w-full outline-none border-none nc-scrollbar-lg"
:class="{ :class="{
'p-2': editEnabled, 'p-2': editEnabled,
@ -234,7 +234,7 @@ watch(inputWrapperRef, () => {
'px-2': isExpandedFormOpen, 'px-2': isExpandedFormOpen,
}" }"
:style="{ :style="{
minHeight: `${height}px`, minHeight: isForm ? '117px' : `${height}px`,
}" }"
:placeholder="isEditColumn ? $t('labels.optional') : ''" :placeholder="isEditColumn ? $t('labels.optional') : ''"
:disabled="readOnly" :disabled="readOnly"
@ -270,7 +270,7 @@ watch(inputWrapperRef, () => {
<NcTooltip <NcTooltip
v-if="!isVisible" v-if="!isVisible"
placement="bottom" placement="bottom"
class="!absolute right-0 hidden nc-text-area-expand-btn group-hover:block z-3" class="!absolute right-1 hidden nc-text-area-expand-btn group-hover:block z-3"
:class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'" :class="isExpandedFormOpen || isForm ? 'top-1' : 'bottom-1'"
> >
<template #title>{{ $t('title.expand') }}</template> <template #title>{{ $t('title.expand') }}</template>

2
packages/nc-gui/components/smartsheet/Cell.vue

@ -204,7 +204,7 @@ onUnmounted(() => {
'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen, 'nc-grid-numeric-cell-right': isGrid && isNumericField && !isEditColumnMenu && !isForm && !isExpandedFormOpen,
'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual, 'h-10': isForm && !isSurveyForm && !isAttachment(column) && !props.virtual,
'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu, 'nc-grid-numeric-cell-left': (isForm && isNumericField && isExpandedFormOpen) || isEditColumnMenu,
'!min-h-30 resize-y': isTextArea(column) && (isForm || isSurveyForm), '!min-h-30': isTextArea(column) && (isForm || isSurveyForm),
}, },
]" ]"
class="nc-cell w-full h-full relative" class="nc-cell w-full h-full relative"

8
packages/nc-gui/components/smartsheet/Form.vue

@ -1179,7 +1179,7 @@ useEventListener(
} }
.nc-input { .nc-input {
@apply appearance-none w-full !bg-white rounded-lg px-2 py-2 border-solid border-1 border-gray-200 focus-within:border-brand-500; @apply appearance-none w-full !bg-white rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500;
&.nc-cell-rating, &.nc-cell-rating,
&.nc-cell-geodata { &.nc-cell-geodata {
@apply !py-1; @apply !py-1;
@ -1188,6 +1188,12 @@ useEventListener(
:deep(input) { :deep(input) {
@apply !px-1; @apply !px-1;
} }
&.nc-cell-longtext {
@apply p-0 h-auto;
}
&:not(.nc-cell-longtext) {
@apply px-2 py-2;
}
} }
.form-meta-input { .form-meta-input {

Loading…
Cancel
Save