fix: monaco editor can not adjust height when parent node's size changes from large to small
This commit is contained in:
parent
ac76131f18
commit
e942f41f66
|
@ -152,7 +152,9 @@ onUnmounted(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div ref="editorRef" :class="{ 'editor-border': props.border === true }" />
|
<div :class="{ 'editor-border': props.border === true }" style="position: relative">
|
||||||
|
<div ref="editorRef" class="editor-inst" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -162,4 +164,12 @@ onUnmounted(() => {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.editor-inst {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
bottom: 2px;
|
||||||
|
left: 2px;
|
||||||
|
right: 2px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -157,8 +157,8 @@ const onSave = () => {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-show="show" class="entry-editor flex-box-v">
|
<div v-show="show" class="entry-editor flex-box-v">
|
||||||
<n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%">
|
<n-card :title="$t('interface.edit_row')" autofocus class="flex-item-expand" size="small">
|
||||||
<div class="editor-content flex-box-v" style="height: 100%">
|
<div class="editor-content flex-box-v flex-item-expand">
|
||||||
<!-- field -->
|
<!-- field -->
|
||||||
<div class="editor-content-item flex-box-v">
|
<div class="editor-content-item flex-box-v">
|
||||||
<div class="editor-content-item-label">{{ props.fieldLabel }}</div>
|
<div class="editor-content-item-label">{{ props.fieldLabel }}</div>
|
||||||
|
@ -180,7 +180,6 @@ const onSave = () => {
|
||||||
:language="viewLanguage"
|
:language="viewLanguage"
|
||||||
:show-line-num="prefStore.showLineNum"
|
:show-line-num="prefStore.showLineNum"
|
||||||
class="flex-item-expand"
|
class="flex-item-expand"
|
||||||
style="height: 100%"
|
|
||||||
@input="onInput"
|
@input="onInput"
|
||||||
@reset="onInput"
|
@reset="onInput"
|
||||||
@save="onSave" />
|
@save="onSave" />
|
||||||
|
@ -248,7 +247,7 @@ const onSave = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
&-label {
|
&-label {
|
||||||
line-height: 1.25;
|
height: 18px;
|
||||||
color: v-bind('themeVars.textColor3');
|
color: v-bind('themeVars.textColor3');
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
|
@ -260,6 +259,12 @@ const onSave = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.n-card__content) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.n-card__action) {
|
:deep(.n-card__action) {
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
background-color: unset;
|
background-color: unset;
|
||||||
|
|
Loading…
Reference in New Issue