ant-design / ant-design/pro-components

🐛[BUG]紧凑和宽松的折叠表单排版有点问题

Open
#8,656 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
4.8k
Forks
1.4k
Avg merge
10h 44m
Merged PRs (30d)
3

Description

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

### 🐛 bug 描述
紧凑模式下,折叠表单的子表单排版左右有点问题:
![image](https://github.com/user-attachments/assets/f46aad13-d5a6-48b3-a7e2-ecefd604632f)
宽松模式下, 也是如此:
![image](https://github.com/user-attachments/assets/9a73abda-63d2-49d3-9dc5-7a2abf8146fe)

### 📷 复现步骤

折叠表单,选紧凑模式or宽松模式,点开表单折叠效果。

### 🏞 期望结果
能跟中等模式一样,background-color能为initial,然后左边的margin适宜,右侧能对齐:
![image](https://github.com/user-attachments/assets/b441c2f1-d304-4c5e-81be-a4d96891d4ed)

### 💻 复现代码

[codesandbox链接](https://codesandbox.io/p/sandbox/antd-card-tabs-selection-forked-7wl2c2?workspaceId=c690e54d-0c55-4a5d-9c66-70a3a3ff15d0)在此。

### © 版本信息

- ProComponents 版本: ^2.6.48
- umi 版本
- 浏览器环境:Chrome
- 开发环境

### 🚑 其他信息
一个是 **.ant-pro-table .ant-table.ant-table-middle .ant-pro-table .ant-pro-card** 只弄了.ant-table-middle 下的 background-color: initial,缺乏 .ant-table-small 和 .ant-table-large 的。
另一个关于左右margin的就没搞懂了。

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction and inspect the styles matching `.ant-pro-table .ant-table.ant-table-middle .ant-pro-table .ant-pro-card`, then compare the compact and loose modes with the medium mode. Done means the compact and loose collapsed forms use the expected background, suitable left margin, and right alignment shown in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.