【6.3.0】下拉展示内容错位问题
Opened this issue · 7 comments
Xuxin19960702 commented
描述问题：
下拉和时间选择展示框显示错位，F12看源代码应该是位置定位计算问题，不知道是不是我少引了js，还是bug，也有可能是样式冲突，但不知道是哪个文件问题。
截图或视频：
如何复现（请务必完整填写下面内容）：
-
你是如何使用 amis 的？
sdk -
amis 版本是什么？请先在最新 beta 版本测试问题是否存在
6.3.0
- 粘贴有问题的完整
amis schema代码：
<div id="testContent" class="app-wrapper"></div>
<script type="text/javascript">
(function () {
let amis = amisRequire('amis/embed');
// 通过替换下面这个配置来生成不同页面
let amisJSON = {
"type": "page",
"body": [
"<h3 style='color: #2468f2'>试用活动<small>（用可免费试用产品，用户新品上线，用研，活动赠送等）</small></h3>",
{
"type": "steps",
"value": "0",
"labelPlacement": "vertical",
"steps": [
{
"title": "First",
"subTitle": "申请活动",
"description": "申请时间"
},
{
"title": "Second",
"subTitle": "主管审核",
"description": "未审核"
},
{
"title": "Third",
"subTitle": "测试",
"description": "未测试"
},
{
"title": "Last",
"subTitle": "上线",
"description": "未上线"
}
]
},
{
"type": "form",
"api": ctx + "/index/api/auc/newact/trival_activity/add",
"title": "申请内容",
"mode": "inline",
"autoFocus": true,
"body": [
{
"type": "fieldSet",
"title": "基本信息",
"body": [
{
"type": "input-text",
"name": "isflag",
"value": 0,
"hidden": true
},
{
"type": "select",
"name": "check_oper",
"label": "审核主管:",
"size": "md",
"source": ctx + "/index/api/auc/newact/checkoperarray",
"placeholder": "请选择",
"searchable": true,
"required": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "radios",
"name": "sys",
"label": "平台:",
"options": [
{
"label": "PC",
"value": 1,
},
{
"label": "手机",
"value": 2,
},
{
"label": "PC+手机",
"value": 3,
}
],
"required": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "apply_name",
"size": "md",
"label": "活动名称:",
"placeholder": "请输入活动名称",
"required": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "radios",
"name": "try_way",
"label": "开通方式:",
"required": true,
"clearable": true,
"options": [
{
"label": "试用",
"value": "try"
},
{
"label": "赠送",
"value": "fee"
},
{
"label": "高端送试用",
"value": "send"
},
{
"label": "特殊试用",
"value": "special_try"
}
]
},
{
"type": "divider"
},
{
"type": "combo",
"name": "try_list",
"addButtonText": "添加产品",
"multiple": true,
"visibleOn": "data.try_way == 'special_try'",
"label": "试用产品:",
"clearValueOnHidden": true,
"value": [
{}
],
"items": [
{
"type": "picker",
"name": "picker",
"label":"选择申请单",
"joinValues": true,
"valueField": "id",
"labelField": "engine",
"label": "单选",
"source": {
"method": "post",
"url": ctx + "/operation_platform/common/approval/query",
"data": {
"yhhdType": "4"
}
},
"size": "lg",
"pickerSchema": {
"mode": "table",
"name": "thelist",
"quickSaveApi": "/amis/api/sample/bulkUpdate",
"quickSaveItemApi": "/amis/api/sample/$id",
"draggable": true,
"headerToolbar": {
"wrapWithPanel": false,
"type": "form",
"className": "text-right",
"target": "thelist",
"mode": "inline",
"body": [
{
"type": "input-text",
"name": "keywords",
"addOn": {
"type": "submit",
"label": "搜索",
"level": "primary",
"icon": "fa fa-search pull-left"
}
}
]
},
"columns": [
{
"name": "id",
"label": "id",
},
{
"name": "approval_name",
"label": "申请单名称:",
},
// 多种类型的活动id需要确定
{
"name": "product_name",
"label": "产品名称",
},
{
"name": "product_id",
"label": "产品sid",
},
{
"name": "lowest_price",
"label": "最低价格:",
},
{
"name": "time_version",
"label": "时间版本",
"type": "mapping",
"map": {
"-1": "无",
"0": "周版",
"1": "月版",
"3": "季版",
"6": "半年版",
"12": "年版",
24 : "两年版",
},
},
{
"name": "sale_or_free_times",
"label": "售卖次数 & 免费试用次数",
},
{
"name": "left_sale_or_free_times",
"label": "剩余售卖次数 & 免费试用次数",
},
{
"name": "send_month",
"label": "试用 OR 赠送期限(月):",
},
{
"name": "send_day",
"label": "试用 OR 赠送期限(天):",
},
{
"name": "start_time",
"label": "活动开始时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "end_time",
"label": "活动结束时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "checked",
"label": "状态",
"type": "mapping",
"map": {
"0": "等待认证中心审核",
"1": "认证中心通过申请",
"-1": "认证中心拒绝申请",
}
}
],
},
},
{
"type": "input-text",
"name": "date_month",
"placeholder": "试用月数",
"clearable": true,
},
{
"type": "input-text",
"name": "date_day",
"placeholder": "试用截止日期（号）",
"clearable": true,
}
]
},
{
"type": "combo",
"name": "try_list",
"addButtonText": "添加产品",
"multiple": true,
"visibleOn": "data.try_way == 'try'",
"label": "试用产品:",
"clearValueOnHidden": true,
"value": [
{}
],
"items": [
{
"type": "picker",
"name": "picker",
"label":"选择申请单",
"joinValues": true,
"valueField": "id",
"labelField": "engine",
"label": "单选",
"source": {
"method": "post",
"url": ctx + "/operation_platform/common/approval/query",
"data": {
"yhhdType": "4"
}
},
"size": "lg",
"pickerSchema": {
"mode": "table",
"name": "thelist",
"quickSaveApi": "/amis/api/sample/bulkUpdate",
"quickSaveItemApi": "/amis/api/sample/$id",
"draggable": true,
"headerToolbar": {
"wrapWithPanel": false,
"type": "form",
"className": "text-right",
"target": "thelist",
"mode": "inline",
"body": [
{
"type": "input-text",
"name": "keywords",
"addOn": {
"type": "submit",
"label": "搜索",
"level": "primary",
"icon": "fa fa-search pull-left"
}
}
]
},
"columns": [
{
"name": "id",
"label": "id",
},
{
"name": "approval_name",
"label": "申请单名称:",
},
// 多种类型的活动id需要确定
{
"name": "product_name",
"label": "产品名称",
},
{
"name": "product_id",
"label": "产品sid",
},
{
"name": "lowest_price",
"label": "最低价格:",
},
{
"name": "time_version",
"label": "时间版本",
"type": "mapping",
"map": {
"-1": "无",
"0": "周版",
"1": "月版",
"3": "季版",
"6": "半年版",
"12": "年版",
24 : "两年版",
},
},
{
"name": "sale_or_free_times",
"label": "售卖次数 & 免费试用次数",
},
{
"name": "left_sale_or_free_times",
"label": "剩余售卖次数 & 免费试用次数",
},
{
"name": "send_month",
"label": "试用 OR 赠送期限(月):",
},
{
"name": "send_day",
"label": "试用 OR 赠送期限(天):",
},
{
"name": "start_time",
"label": "活动开始时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "end_time",
"label": "活动结束时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "checked",
"label": "状态",
"type": "mapping",
"map": {
"0": "等待认证中心审核",
"1": "认证中心通过申请",
"-1": "认证中心拒绝申请",
}
}
],
},
},
{
"type": "input-text",
"name": "day",
"placeholder": "试用期限(天数)",
"clearable": true,
}
]
},
{
"type": "combo",
"name": "try_list",
"addButtonText": "添加产品",
"multiple": true,
"visibleOn": "data.try_way == 'fee'",
"clearValueOnHidden": true,
"label": "赠送产品:",
"value": [
{}
],
"items": [
{
"type": "picker",
"name": "picker",
"label":"选择申请单",
"joinValues": true,
"valueField": "id",
"labelField": "engine",
"label": "单选",
"source": {
"method": "post",
"url": ctx + "/operation_platform/common/approval/query",
"data": {
"yhhdType": "4"
}
},
"size": "lg",
"pickerSchema": {
"mode": "table",
"name": "thelist",
"quickSaveApi": "/amis/api/sample/bulkUpdate",
"quickSaveItemApi": "/amis/api/sample/$id",
"draggable": true,
"headerToolbar": {
"wrapWithPanel": false,
"type": "form",
"className": "text-right",
"target": "thelist",
"mode": "inline",
"body": [
{
"type": "input-text",
"name": "keywords",
"addOn": {
"type": "submit",
"label": "搜索",
"level": "primary",
"icon": "fa fa-search pull-left"
}
}
]
},
"columns": [
{
"name": "id",
"label": "id",
},
{
"name": "approval_name",
"label": "申请单名称:",
},
// 多种类型的活动id需要确定
{
"name": "product_name",
"label": "产品名称",
},
{
"name": "product_id",
"label": "产品sid",
},
{
"name": "lowest_price",
"label": "最低价格:",
},
{
"name": "time_version",
"label": "时间版本",
"type": "mapping",
"map": {
"-1": "无",
"0": "周版",
"1": "月版",
"3": "季版",
"6": "半年版",
"12": "年版",
24 : "两年版",
},
},
{
"name": "sale_or_free_times",
"label": "售卖次数 & 免费试用次数",
},
{
"name": "left_sale_or_free_times",
"label": "剩余售卖次数 & 免费试用次数",
},
{
"name": "send_month",
"label": "试用 OR 赠送期限(月):",
},
{
"name": "send_day",
"label": "试用 OR 赠送期限(天):",
},
{
"name": "start_time",
"label": "活动开始时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "end_time",
"label": "活动结束时间:",
"format": "YYYY-MM-DD HH:mm:ss",
},
{
"name": "checked",
"label": "状态",
"type": "mapping",
"map": {
"0": "等待认证中心审核",
"1": "认证中心通过申请",
"-1": "认证中心拒绝申请",
}
}
],
},
},
{
"type": "input-text",
"name": "month",
"placeholder": "请输入月数",
"clearable": true,
},
{
"type": "input-text",
"name": "day",
"placeholder": "请输入天数",
"clearable": true,
},
{
"type": "input-text",
"name": "price",
"placeholder": "请输入价格",
"clearable": true,
}
]
},
{
"type": "select",
"name": "sid",
"size": "md",
"label": "试用产品:",
"visibleOn": "data.try_way == 'send'",
"clearValueOnHidden": true,
"source": ctx + "/index/api/auc/newact/newproductquery?type=4",
"placeholder": "请选择试用产品",
"searchable": true,
"clearable": true,
},
{
"type": "select",
"name": "high_end_sid",
"size": "md",
"visibleOn": "data.try_way == 'send'",
"clearValueOnHidden": true,
"source": ctx + "/index/api/auc/newact/newproductquery?type=4",
"placeholder": "请选择高端产品",
"searchable": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-datetime",
"name": "sdate",
"label": "活动开始时间:",
"format": "YYYY-MM-DD HH:mm:ss",
"required": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-datetime",
"name": "edate",
"label": "活动结束时间:",
"format": "YYYY-MM-DD HH:mm:ss",
"required": true,
"clearable": true,
},
]
},
{
"type": "fieldSet",
"title": "其他信息",
"body": [
{
"type": "radios",
"name": "is_cdkey",
"label": "是否生成兑换码:",
"clearable": true,
"desc": " （后台自动生成兑换码，编辑时可选择发送）",
"options": [
{
"label": "需要",
"value": 1
},
{
"label": "不需要",
"value": 2
}
]
},
{
"type": "divider"
},
{
"type": "checkboxes",
"name": "is_push",
"label": "是否推送:",
"desc": " （参与该活动的用户将被推送，可针对该批用户二次推广）",
"options": [
{
"label": "推送",
"value": 1,
}
],
"clearable": true,
},
{
"type": "divider"
},
{
"type": "checkboxes",
"name": "is_power",
"label": "参与限制1:",
"options": [
{
"label": "产品有权限不可参与",
"value": 1,
}
],
"clearable": true,
},
{
"type": "divider"
},
{
"type": "checkboxes",
"label": "参与限制2:",
"name": "is_order",
"options": [
{
"label": "产品购买过不可参与",
"value": 1,
}
],
"clearable": true,
},
{
"type": "divider"
},
{
"type": "checkboxes",
"name": "is_htry",
"label": "参与限制3:",
"options": [
{
"label": "产品使用过不可参与",
"value": 1,
}
],
"clearable": true,
},
{
"type": "divider"
},
{
"type": "select",
"name": "feemode",
"source": ctx + "/index/api/auc/newact/new_activity_recharge_method",
"label": "充值方式:",
"size": "md",
"searchable": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "fee_sn",
"label": "充值流水号:",
"placeholder": "充值流水号",
"desc": "请找财务(胡金坤)进行 ”资金流水添加“ 获取",
"size": "md",
"clearable": true,
},
{
"type": "divider"
},
{
"type": "select",
"name": "partner",
"source": ctx + "/index/api/auc/newact/new_activity_partner",
"label": "合作方:",
"size": "md",
"searchable": true,
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "total_num",
"label": "试用总数量:",
"placeholder": "发放试用总数量",
"size": "md",
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "only_once",
"label": "试用次数:",
"placeholder": "请输入单个账户可参与次数",
"size": "md",
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "pro_max_num",
"label": "可选产品个数:",
"placeholder": "单账户可试用产品数量",
"size": "md",
"clearable": true,
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "limit_ac_id",
"label": "互斥活动:",
"placeholder": "请输入活动RID",
"desc": "多个活动id用,号分割。如(ac_id,ac_id)",
"size": "md",
"clearable": true,
},
{
"type": "divider"
},
{
"type": "textarea",
"name": "descr",
"size": "md",
"label": "申请原因：",
"clearable": true
}
]
},
],
"actions": [
{
"type": "submit",
"label": "提交",
"level": "success"
},
{
"type": "reset",
"label": "重置"
}
]
}
]
};
let amisScoped = amis.embed('#testContent', amisJSON);
})();
</script>
- 操作步骤
点击下拉框，或者时间选择框
github-actions commented
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.
2betop commented
没能复现，怀疑是外围 css 影响了
Xuxin19960702 commented
没能复现，怀疑是外围 css 影响了
你好，可以麻烦提示一下css方向吗？后端开发不太会查。（我是1.9升6.3后，出现了这个问题）🙇
2betop commented
可能跟外围布局容器的样式有关，要靠你自己了
lengqingfeng commented
下拉确实出现错位，我也遇到好几次
liuzyong commented
按钮点击后，弹出抽屉弹框。在弹框里面加上日期组件或下拉框组件。使用时选择日期，抽屉弹框从右边跑到左边了。F12 发现弹框的样式里面多了 has-popover
liuzyong commented
可以去看看引用amis的组件看看，我的项目找到问题了。
将 import 'amis/lib/themes/default.css'; 改为 import 'amis/lib/themes/cxd.css';