baidu / baidu/amis

BUG: amis折叠器的手机效果错误

Open
#10,596 1 comment 0 reactions 0 assignees View on GitHub
feat need confirm
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

#### 描述问题:

在表单里的“折叠器”,手机效果不正确。(见截图 标示1)
不在表单里的“折叠器”,手机效果正确。(见截图 标示2)

另外,不在表单里的“折叠器”,多行文本底下有边框线,加上折叠器的边框线,就出现了2条边框线。

#### 截图或视频:
![amis折叠器的手机效果错误](https://github.com/baidu/amis/assets/153352697/d77488cd-a823-4784-ace7-a1ec010830bd)

#### 如何复现(请务必完整填写下面内容):

1. 你是如何使用 amis 的?
`sdk`

2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在
amis v6.6有问题,之前版本也有问题。

4. 粘贴有问题的完整 `amis schema` 代码:
```
{
"type": "page",
"title": "Hello world",
"body": [
{
"type": "tpl",
"tpl": "初始页面",
"wrapperComponent": "",
"inline": false,
"id": "u:6b4d544c2b45"
},
{
"type": "input-month",
"label": "日期",
"name": "date",
"id": "u:60be6cc33828",
"displayFormat": "YYYY-MM",
"placeholder": "请选择月份",
"valueFormat": "X",
"minDate": "",
"maxDate": "",
"value": "${TODAY()}"
},
{
"id": "u:da2573af02a3",
"type": "form",
"title": "表单",
"mode": "inline",
"dsType": "api",
"feat": "Insert",
"body": [
{
"type": "input-text",
"label": "文本",
"name": "text",
"id": "u:b2923a6ec96b"
},
{
"type": "input-number",
"label": "数字",
"name": "number",
"keyboard": true,
"id": "u:e578e4e36339"
},
{
"type": "textarea",
"label": "多行文本",
"name": "textarea",
"id": "u:9f4764af1c67"
},
{
"type": "collapse-group",
"activeKey": [
"1"
],
"body": [
{
"type": "collapse",
"key": "1",
"active": true,
"header": "标题1",
"body": [
{
"type": "tpl",
"tpl": "这里是内容1",
"wrapperComponent": "",
"inline": false,
"id": "u:ee05a3c01a9b"
}
],
"id": "u:c982bb36835d"
},
{
"type": "collapse",
"key": "2",
"header": "标题2",
"body": [
{
"type": "tpl",
"tpl": "这里是内容1",
"wrapperComponent": "",
"inline": false,
"id": "u:2627bdd6946b"
}
],
"id": "u:904ef7430f3f"
}
],
"id": "u:f5ce22048efe"
}
],
"actions": [
{
"type": "button",
"label": "提交",
"onEvent": {
"click": {
"actions": [
{
"actionType": "submit",
"componentId": "u:da2573af02a3"
}
]
}
},
"level": "primary",
"id": "u:dc53c87ef8bd"
}
],
"resetAfterSubmit": true,
"wrapWithPanel": true
},
{
"type": "collapse-group",
"activeKey": [],
"body": [
{
"type": "collapse",
"key": "1",
"active": false,
"header": "标题1",
"body": [
{
"type": "tpl",
"tpl": "这里是内容1",
"wrapperComponent": "",
"inline": false,
"id": "u:08e47923071e"
}
],
"id": "u:5e2d1d0918a3",
"collapsable": true
},
{
"type": "collapse",
"key": "2",
"header": "标题2",
"body": [
{
"type": "tpl",
"tpl": "这里是内容1",
"wrapperComponent": "",
"inline": false,
"id": "u:153829acc75c"
},
{
"type": "textarea",
"label": "多行文本",
"name": "textarea",
"id": "u:fa48f8a10f34",
"minRows": 3,
"maxRows": 20,
"readOnly": false,
"static": true,
"value": "1\n1\n2"
}
],
"id": "u:8e569e72a511",
"active": false
},
{
"type": "tpl",
"tpl": "请编辑内容",
"inline": true,
"wrapperComponent": "",
"id": "u:812a0e9bc3f7"
}
],
"id": "u:67ae11ecb81f",
"accordion": false
}
],
"id": "u:09fbb140b7c7"
}
```

5. 操作步骤
手机浏览器查看网页

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the supplied AMIS schema in a mobile browser and compare the collapse-group rendered inside and outside the form. Check the collapse and textarea presentation in both cases; done means the form layout matches the standalone layout and the extra border beneath the multiline text is removed.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.