radio-group 放在form cell 里面的显示高度问题

[liniu]

Wot Design Uni 版本号

1.3.10

平台

h5

复现Demo地址（如不提供，issue将被直接关闭）

暂时没有

重现步骤

<wd-form ref="form" :model="model">
			<wd-cell-group border>
				<wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearable
					placeholder="请填写姓名" :rules="[{ required: true }]" />

				<wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center>

					<wd-radio-group v-model="m.sex" shape="dot" cell inline >
						<wd-radio :value="1">男</wd-radio>
						<wd-radio :value="2">女</wd-radio>
					</wd-radio-group>

				</wd-cell>
                               ......

期望的结果是什么？

radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。

实际的结果是什么？

radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。

环境信息

H5平台

其他补充信息

No response

[Moonofweisheng]

先尝试修改样式，这个问题我们后面看看

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "Moonofweisheng/wot-design-uni" ***@***.***&gt;; 发送时间:&nbsp;2024年9月24日(星期二) 晚上6:06 ***@***.***&gt;; ***@***.***&gt;; 主题:&nbsp;[Moonofweisheng/wot-design-uni] radio-group 放在form cell 里面的显示高度问题 (Issue #628) Wot Design Uni 版本号 1.3.10 平台 h5 复现Demo地址（如不提供，issue将被直接关闭） 暂时没有 重现步骤 image.png (view on web) <wd-form ref="form" :model="model"&gt;<wd-cell-group border&gt;<wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearableplaceholder="请填写姓名" :rules="[{ required: true }]" /&gt;<wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center&gt;<wd-radio-group v-model="m.sex" shape="dot" cell inline &gt;<wd-radio :value="1"&gt;男</wd-radio&gt;<wd-radio :value="2"&gt;女</wd-radio&gt;</wd-radio-group&gt;</wd-cell&gt; ...... 期望的结果是什么？ radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。 实际的结果是什么？ radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。 环境信息 H5平台 其他补充信息 No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***&gt;

[RYGRIT]

先尝试修改样式，这个问题我们后面看看
…
------------------ 原始邮件 ------------------ 发件人: "Moonofweisheng/wot-design-uni" @.>; 发送时间: 2024年9月24日(星期二) 晚上6:06 @.>; @.>; 主题: [Moonofweisheng/wot-design-uni] radio-group 放在form cell 里面的显示高度问题 (Issue #628) Wot Design Uni 版本号 1.3.10 平台 h5 复现Demo地址（如不提供，issue将被直接关闭） 暂时没有 重现步骤 image.png (view on web) <wd-form ref="form" :model="model"><wd-cell-group border><wd-input v-model="m.patName" prop="patName" label="姓名" label-width="100px" clearableplaceholder="请填写姓名" :rules="[{ required: true }]" /><wd-cell title="性别" required prop="sex" :rules="[{ required: true }]" center><wd-radio-group v-model="m.sex" shape="dot" cell inline ><wd-radio :value="1">男</wd-radio><wd-radio :value="2">女</wd-radio></wd-radio-group></wd-cell> ...... 期望的结果是什么？ radio-group 放在form cell 里面,能和其他组件一样，保持同样的高度。 实际的结果是什么？ radio-group 放在form cell 里面，高度和其他组件不一致，有点不协调。 环境信息 H5平台 其他补充信息 No response — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: @.>

我检查了一下，发现有两个因素影响了

1. 给 RadioGroup 设置 cell 属性之后，会增加一个上下 padding，导致变高了
2. RadioGroup 原本的样式 font-size: 0;

[Moonofweisheng]

wt-switch 的高度也是有问题的 ，详见demo的“开启折扣”高度跟其他行就不一致，

wt-form的设计感觉怪怪的，其他ui基本都有一个form-item包裹。

form-item已经有了，只不过目前没办法在不存在破坏性改动的情况下使用，在1.x版本你遇到的不存在cell的组件最好直接自行通过修改样式的方式适应cell的行高，等待form改动的话，应该会在2.x版本，这将是一个破坏性的改动，会存在大量的组件被调整，这是我的设想，目前还没有启动2.x版本的开发。

[liniu]

情况

wt-switch 的高度也是有问题的 ，详见demo的“开启折扣”高度跟其他行就不一致，
wt-form的设计感觉怪怪的，其他ui基本都有一个form-item包裹。

form-item已经有了，只不过目前没办法在不存在破坏性改动的情况下使用，在1.x版本你遇到的不存在cell的组件最好直接自行通过修改样式的方式适应cell的行高，等待form改动的话，应该会在2.x版本，这将是一个破坏性的改动，会存在大量的组件被调整，这是我的设想，目前还没有启动2.x版本的开发。

谢谢，from是个UI组件的灵魂，希望尽早启动，或者先引入from2，让大家先使用起来提早发现问题，到新版本再换名称。

[liniu]

from2 什么时候先搞起来

[liniu]

高度问题依然还在，版本 "wot-design-uni": "^1.3.12"

  <wd-cell title="分享标记" titleWidth="120px" center>
                    <wd-radio-group v-model="m.shared" shape="dot" inline cell>
                        <wd-radio :value="1" custom-class="mx-1">公开</wd-radio>                      
                        <wd-radio :value="3" custom-class="mx-1">团队</wd-radio>
                    </wd-radio-group>
                </wd-cell>

如果去掉 wd-radio-group 的cell,则radio-group 显示上下非居中，如下图

  <wd-cell title="分享标记" titleWidth="120px" center>
                    <wd-radio-group v-model="m.shared" shape="dot" inline >
                        <wd-radio :value="1" custom-class="mx-1">公开</wd-radio>                      
                        <wd-radio :value="3" custom-class="mx-1">团队</wd-radio>
                    </wd-radio-group>
                </wd-cell>

目前临时解决方法：

::v-deep .wd-radio.is-cell-radio{
    padding: 3px 5px
}
::v-deep .wd-radio-group{
    display: flex;
}