ProForm 遇到表单的label ,文案可能过长，如何统一对齐呢？

最新推荐文章于 2023-10-13 10:14:37 发布

酒沁

最新推荐文章于 2023-10-13 10:14:37 发布

阅读量1.8k

点赞数

分类专栏： AntdPro 文章标签： react javascript 前端 html5 css3

本文链接：https://blog.csdn.net/m0_69927213/article/details/128053102

版权

AntdPro 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、问题的描述

表单控件中，希望布局可以更美化一些，目前是左对齐，导致右边的控件不整齐的效果

二、正常的预期是什么？

三、问题产生的原因分析

翻看文档，配置label相关属性。

四、问题的解决方案

配置以下代码即可右对齐，nice~

 <ProForm
      formRef={formRef}
      labelCol={{ flex: '185px' }}// 根据效果可以自己具体去控制大小
      labelAlign="right"
      labelWrap
      wrapperCol={{ flex: 1 }}
  />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

酒沁

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ProForm 遇到表单的label ,文案可能过长，如何统一对齐呢？

解决ProForm 遇到表单的label 文案过长，如何统一对齐问题
复制链接

扫一扫

专栏目录

Unity UGUI 之实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）

仙魁XAN

08-04

8926

Unity UGUI 之实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）目录 Unity UGUI 之实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）一、简单介绍二、实现原理三、注意事项四、效果预览五、实现步骤常规 Text TextMeshPro 六、关键脚本一、简单介绍 UGUI，是Unity自带的 GUI 系统，震撼力一些常规的操作，便于后...

Form 表单内有多个元素的使用方式

zm_miner的博客

04-16

2967

产品中常有的一个需求输入框后面有描述文案或其他组件我们可能这样写 <Form.Item name="firstName" label="姓名" rules={[{ required: true, message: '请输入姓名!' }]} > <Row gutter={8}> <Col span={12}> <Input defaultValue={detail?.firstName} /> &

参与评论您还未登录，请先登录后发表或查看评论

ProForm的对齐问题

最新发布

小蓝人的博客

10-13

534

但是这样会导致这个表单项的label的width不会和上面对齐，所以表单的配置可以把labelCol改为labelWidth。在ProForm里这样配置的时候，如果有的表单项需要占一行，则给该表单项配置。这样所有表单项的width都是对齐的。

layui form 表单label标签内容过多换行

weixin_47634487的博客

11-28

710

【代码】layui form 表单label标签内容过多换行。

css form 表单组对齐

weixin_34082695的博客

07-01

205

2014年7月1日 15:31:17 第一次写css,见谅 css: 1 .form-box .form-group .form-label {text-align: right; width: 200px; height: 34px; line-height: 34px; font:14px; margin-right: 10px;} 2 .form-box .form-group...

antd库开发时表单里label太长的情况（建议收藏）

糜家智の博客

10-17

5272

我们在用antd组件库开发的时候，其实很多时候会遇到一些奇奇怪怪的场景，但是只需要花费一丢丢时间就可以解决，可如此会浪费时间，这里主要是label太长了的场景。

表单文字对齐

qq_52685664的博客

06-30

4026

label文字对齐方式表单的对齐方式分为三种 1、左对齐（默认对齐方式，一般不需要） <form action="javascript:void(0)" method="post"> <div> <label>用户名：</label> <input type="text" name="" id="" value="" /> <...

antd.pro中使用Modal嵌套Form实现表单的验证及表单项的值获取

chenqk_123的专栏

08-04

9862

antd.pro是时下很流行的React集成工具，其中包含了，react的核心代码，react路由管理，react的状态管理(dva)，以及umi等适应快速开发的一套完整框架解决方案。最近接触到antd.pro，使用到Form表单的验证问题。在前端开发中必不可少的会碰到添加和修改功能。简单的添加/修改功能会在列表页list页面中定义一个Modal，或者以组件的方式创建一个CreateForm，然后在主页面引用。不管哪种方式只要是以Modal的形式展示，那就会牵扯到需要在Modal中嵌入Form表单。

antd提交表单_请问下antd的form表单如何在form表单外部调用form的submit事件?

weixin_30824391的博客

12-31

2637

1.先在有一个需求用steps步骤条在第一部让用户输入数据后,点击from外面的Button你能够获取到form表单中的值进行提交.2.3.`{/方案基本信息/}<div className={`steps-content ${this.state.current === 0 ? "steps-content-active" : " "}`}><StepFirstformItem...

在Final Cut Pro X 中如何把音频和视频对齐？

llhf688的博客

03-01

5058

在拍摄的视频的时候，往往因为现场的环境嘈杂而使得录音不清晰。我们通常会单独用一个设备录音，获得单条音频。在用Final Cut Pro X剪辑上的时候，如何把音频和视频对齐呢？用Final Cut Pro X把音频和视频对齐教程 1.在事件中点击导入媒体 2.按住Command，选取要同步的音频和视频，点击导入所选项 3.软件会自动回到原界面，同时选中音频和视频文件，右键点击同步片段 4.在弹出的框中，勾选使用音频进行同步和停用AV片段上的音频组件，然后点击好。 .

antd-pro的table搜索表格标签没显示完全

LLL_liuhui的博客

11-03

961

<ProTable columns={columns} dataSource={dataSource} rowKey="key" search={{ span: 6, autoComplete: "off", labelWidth: 100 }} dateFormatter="string" /> 设置labelWidth ..

Antd之实现form label文字左/右对齐

热门推荐

Welkin_qing的博客

01-25

1万+

文章目录一、设置文字以冒号分割右对齐二、设置文字以冒号分割左对齐一、设置文字以冒号分割右对齐类似下面这种情况代码： const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 7 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 17 }, }, }; 二、设置文字以冒号分割左对齐结构如下：代码： const formIt

表单元素内部对齐

weixin_40222803的博客

09-20

1060

看代码就可以了表单对齐 /*label{display: inline-block;width: 100px;text-align: right;margin-right: 20px;margin-bottom: 20px;}*/ /*label是行内元素在这里的用法类似于span标签转化为行内块行内右对齐即可但是表单元素自身有很多bug inp

使Antd Form 表单组件在一行显示

kiku

05-20

7161

form 表单在一行显示一、通过栅格布局二、wrapperCol 属性三、layout=“inline” 表单布局

antd 表单修改label样式

qq_45178972的博客

08-14

8480

修改label样式： labelCol: { style: { width: '150px' } },

Ant Design Pro(5)-6.高级表单ProForm

AG.『Feng』的博客

10-18

5029

PrForm表单使用

Ant design Vue 相关设置或问题集合（持续更新...）

qq_27387133的博客

05-19

6050

目录 1.日期选择框 datePicker设置可选范围在今天或之前 1.1设置":disabled-date"属性 2.设置select下拉框可以进行输入搜索 2.1设置"show-search"和'option-filter-prop="children"'属性 3.a-form-item标签中的label文字不会自动换行 3.1将label单独写出来并设置white-space样式，不作为属性写在a-form-item标签中 3.2改动后发现行高太大了，怎么办？ 1.日期选择框 d.

上下布局——内容内撑

ForMyQianDuan的博客

07-16

458

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> html,body{ padding: 0px; margin: 0px; /*关键性设置*/ height: 100%;

小米10 Pro支持MEMC？怎么用呢？

05-31

是的，小米10 Pro支持MEMC技术。MEMC全称为运动估算和补偿(Motion Estimation and Motion Compensation)，可以在视频播放时提高视频的帧率，使画面更加流畅。下面是使用小米10 Pro的MEMC技术的步骤： 1. 打开小米10 Pro的设置菜单，在“显示”选项中找到“高级设置”选项，然后点击“高级设置”。 2. 在“高级设置”页面中，找到“视频增强”选项，然后点击“视频增强”。 3. 在“视频增强”页面中，找到“MEMC”选项，然后开启MEMC开关即可。注意：开启MEMC后，可能会对电池寿命产生影响，因为MEMC需要更多的计算资源。同时，对于一些影视作品来说，原本的帧率就已经很高，开启MEMC可能会导致画面过于流畅，影响观感。建议在使用MEMC时，根据实际情况进行调整。