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.

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

NButton(circle) 与 NInput 放在flex-row的容器内,NButton(circle)内容如果不够撑起宽度,圆形会在高度方向被拉长 #1557

Closed
xby020 opened this issue Nov 10, 2021 · 2 comments · Fixed by #1562
Assignees
Labels
bug Something isn't working

Comments

@xby020
Copy link

xby020 commented Nov 10, 2021

TuSimple/naive-ui version (版本)

2.20.2

Vue version (Vue 版本)

3.2.21

Browser and its version (浏览器及其版本)

Edge

System and its version (系统及其版本)

Win 10

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/embed/clever-gwen-bhenb?fontsize=14&hidenavigation=1&theme=dark

Reappearance steps (重现步骤)

  1. 创建一个flex容器;
  2. 把一个circle的button和input组件放一起;
  3. button瘪了

Expected results (期望的结果)

<n-button circle></n-button>应该在大部分情况下保持圆形

Actual results (实际的结果)

<n-button circle/>在flex容器内与INPUT组件放在同一行,水平方向宽度减少。

Remarks (补充说明)

@github-actions github-actions bot added the untriaged need to sort label Nov 10, 2021
@xby020
Copy link
Author

xby020 commented Nov 10, 2021

image
像这样

@XieZongChen XieZongChen added bug Something isn't working consideration-needed and removed untriaged need to sort labels Nov 10, 2021
@07akioni
Copy link
Collaborator

@amadeus711 add flex-shrink: 0 to button

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants