Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

n-modal 支持设置最高高度，超出在modal区域内滚动 #4848

Open
Tracked by #6736
, #6737
...
laterdayi opened this issue May 23, 2023 · 7 comments · May be fixed by #6759
Open
Tracked by #6736
, #6737
...

n-modal 支持设置最高高度，超出在modal区域内滚动 #4848

laterdayi opened this issue May 23, 2023 · 7 comments · May be fixed by #6759
Labels
feature request New feature or request

Comments

@laterdayi
Copy link

laterdayi commented May 23, 2023 •
edited
Loading

This function solves the problem (这个功能解决的问题)

n-modal 支持设置最高高度，超出在modal区域内滚动

Expected API (期望的 API)

 <n-modal v-model:show="showModal" max-height='40'  preset="dialog" title="Dialog">
    <template #header>
      <div>标题</div>
    </template>
    <div>内容</div>
    <div>内容</div>
    <div>内容</div>
    .....
    <template #action>
      <div>操作</div>
    </template>
  </n-modal>
@github-actions github-actions bot added the feature request New feature or request label May 23, 2023
@yudan215
Copy link

这个可以自己加样式解决的

@laterdayi
Copy link
Author

想能支持 设个最大高度，让 modal content 自行滚动

@DvShu
Copy link

DvShu commented Nov 3, 2023 •
edited
Loading

Modal 能否设置只滚动 content 不滚动 header 和 footer

我不想让红框部分参与滚动，我看了一下，因为 scrollbar 的原因，好像不行。

@ZhaoRd
Copy link

ZhaoRd commented Aug 6, 2024

添加全局样式

/* n-modal s */
.n-modal-container {
.n-scrollbar-content.n-modal-scroll-content {
height: 100%;

.n-modal {
  max-height: 75%;

  .n-card__content {
    overflow: auto;
  }
}

}
}
/* n-modal e */

@ZhaoRd
Copy link

ZhaoRd commented Aug 6, 2024

挺奇怪的，在vue文件中设置 :deep 都不能覆盖样式

@jahnli
Copy link
Collaborator

jahnli commented Oct 11, 2024

不能使用 scoped

@jahnli jahnli closed this as completed Oct 11, 2024
@jahnli jahnli reopened this Feb 3, 2025
This was referenced Feb 3, 2025
Closed
Closed
Open
Open
@zhengdaonian
Copy link
Contributor

这个主要是dialog那个不好整，为啥modal里面有个预设的dialog

@zhengdaonian zhengdaonian linked a pull request Feb 18, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

n-modal 新增 max-height 属性 zhengdaonian/naive-ui
6 participants
@ZhaoRd @DvShu @jahnli @yudan215 @zhengdaonian @laterdayi