[Bug Report] [Component] [input] clearable 会动态改变宽度 #7287

huang-yf3160 · 2022-04-21T03:13:57Z

Bug Type: Component

Environment

Vue Version: 3.2.31
Element Plus Version: 2.1.10
Browser / OS: chrome 99.0.4844.82
Build Tool: Vite

Reproduction

Related Component

el-input

Reproduction Link

Element Plus Playground

Steps to reproduce

在表单组件下，input组件增加clearable属性，input组件宽度会动态变化

  <el-form inline>
    <el-form-item>
      <el-input v-model="input" placeholder="Please input" clearable />
    </el-form-item>
  </el-form>

What is Expected?

不会变化宽度

What is actually happening?

宽度动态变化

Additional comments

(empty)

The text was updated successfully, but these errors were encountered:

josonho · 2022-04-21T06:41:03Z

你好~

因为你的代码中el-input是没有宽度的，
所以实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度。
可以写css固定el-input宽度来处理。

Element Plus Playground

huang-yf3160 · 2022-04-21T06:43:37Z

你好~

因为你的代码中el-input是没有宽度的，所以实际渲染出来的 el-input宽度 = 原生input宽度 + 前缀图标宽度 + 后缀图标宽度。可以写css固定el-input宽度来处理。

Element Plus Playground

我知道怎么解决，但是在之前的版本里是没有这个问题的。

YunYouJun · 2022-04-27T16:13:18Z

Maybe it is caused by #7179

Can you have a look?

The solution I can think of is to add a default width to the container, but I'm not sure if this creates additional issues.

emojiiii · 2022-04-28T01:25:51Z

对于clearable或者可以使用绝对定位去解决，其他继续沿用flex布局？

YunYouJun · 2022-04-28T11:17:57Z

对于clearable或者可以使用绝对定位去解决，其他继续沿用flex布局？

clearable 应该还需要对 suffix 等情况进行判断，以及设置输入框的可显示宽度，可能也比较麻烦。

plainheart · 2022-04-29T10:42:21Z

对于clearable或者可以使用绝对定位去解决

改成绝对定位，就需要动态计算，比较麻烦而且很容易出现问题。之所以改成 flex 布局，就是为了解决开发者指定多个 suffix、prefix 时的布局问题。

clearable 应该还需要对 suffix 等情况进行判断，以及设置输入框的可显示宽度，可能也比较麻烦。

其他组件库默认给了 clearable 占位，但那样默认情况下右侧的留白就会显得比较大，和左侧也不对称，不是很美观。前几天在 discord 讨论过，暂时还想不出好的解决办法。

YunYouJun · 2022-04-29T12:28:30Z

为 input container 设置默认宽度是否存在潜在问题？@plainheart

plainheart · 2022-04-30T05:44:55Z

@YunYouJun 我觉得还是不要默认设置宽度个人感觉大多数情况下开发者可能更喜欢默认填充父级宽度而且加了默认宽度也算是一个小的 BC 了。

YunYouJun · 2022-04-30T11:47:07Z

现在的 input 似乎因为浏览器默认 input 会有一个默认宽度，并导致拥有 clearable 等 suffix 元素时改变其宽度。
也许我们应该在文档中提示用户为其容器设置宽度。

cc @JeremyWuuuuu

tolking · 2022-05-20T12:23:14Z

感觉直接可以给一个最小宽度 220px (--el-date-editor-width)？

类似的还有在 el-form inline 中使用 Slider 由于没有最小宽度直接就是一个圆圈。

为 inline 表单内部相关的组件设置一个最小宽度或许是一个不错的方案

chenxch · 2022-07-13T17:35:23Z

这个问题好像好久没动静了，我看了一遍，也是比较赞同不添加默认宽度，如果没有很好的解决办法，可能要舍弃掉美观这块，采用flex布局。

tuutoo · 2022-07-14T04:56:07Z

显示隐藏时的宽度可能另一个问题.

可以考虑把这个Hover时显示隐藏Clearable的功能拿掉吗

这功能在视觉上造成了视觉不一致, 主要有下面两种情况

移动端和桌面端的视觉不一致: 要Hover时显示隐藏这个按钮. 还要考虑移动端的情况, 移动端是没有Hover的.
多个图标时的视觉不一致: 如果还有其他图标, 比如显示隐藏密码的图标, 又没有做这个Hover和Focus的显示隐藏.

…s#7287)

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287)

…s#7287)

In version 2.2.17, use currentPage can't bind variable to current page. fix(components): [input] input width change by clearable (element-plus#7287)

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287)

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287)

agrass-GitHub · 2022-12-28T14:54:08Z

这个问题太影响使用体验了。无论是定位还是占位感觉都比现在的这个方案合适。

KYX1234 · 2023-01-15T09:46:14Z

咱就是说，之前饿了么2都没有这个问题的，到3这样用起来真的很不爽，为什么不考虑在form inline模式下给个默认定宽呢

yezimikk · 2023-04-16T08:36:18Z

能不能做个input有值的情况下长期显示clearable的图标的API？

wzc520pyfm · 2023-04-22T08:19:33Z

是否可添加attributes, 让使用者自行决定使用何种方案?
方案一: input宽度随clearable显隐动态调整
方案二: input为clearable预留空间

tolking · 2023-04-23T01:30:40Z

为 form inline 模式下的 input 增加默认宽度或许是比较合适的主意

YunYouJun · 2023-05-17T03:15:29Z

为 form inline 模式下的 input 增加默认宽度或许是比较合适的主意

Let's do it?

tolking · 2023-05-17T11:34:23Z

为 form inline 模式下的 input 增加默认宽度或许是比较合适的主意

Let's do it?

agree

dengshenkk · 2023-06-05T09:02:25Z

还没商量出一个方案吗? 确定下来咔咔先整了再说

jummyliu · 2023-06-27T06:50:09Z

注意，给 el-input 指定宽度后 220px (--el-date-editor-width)？，会导致手动指定宽度的 el-select 显示异常 @tolking

strangePix · 2023-06-27T13:58:14Z

所以路过讨论一下，最后是怎么处理了...全局加默认宽度吗

YunYouJun · 2023-06-27T17:02:39Z

所以路过讨论一下，最后是怎么处理了...全局加默认宽度吗

添加默认宽度后，在复用 input 的 select 等多种组件将遇到其他问题，这使得情况更加复杂且难以复用。
反之想要添加固定宽度则更为简单。
考虑到样式的侵入性和可定制性，我们决定仍不添加默认宽度。

并在文档中针对当前问题给出解决方案提示。

#13375

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287) fix(components): [input] input width change by clearable (element-plus#7287)

GuLinLing · 2023-12-22T01:13:53Z

不想设置宽度的可以试试，希望官方早点解决
.el-input__suffix:not(.el-select .el-input__suffix) {
margin-left: -22px;
}
.el-input__inner:not(.el-select .el-input__inner) {
padding-right: 22px;
}

huang-yf3160 changed the title ~~[Bug Report] [Component] [input] ElMessageBox confirm button style bug~~ [Bug Report] [Component] [input] ElInput style bug Apr 21, 2022

josonho mentioned this issue Apr 22, 2022

[Bug Report] [Component] [input] el-input clearable 会动态改变宽度之前的版本不会这样 #7328

Closed

sxzz changed the title ~~[Bug Report] [Component] [input] ElInput style bug~~ [Bug Report] [Component] [input] clearable 会动态改变宽度 Apr 26, 2022

sxzz added the Component::Input label Apr 27, 2022

github-actions bot added the inactive label Jun 20, 2022

tolking mentioned this issue Jun 22, 2022

[Bug Report] [Component] [input] input加了clearable属性后输入内容宽度会发生变化！失去焦点恢复原始宽度，获取焦点又会宽度改变 #8411

Closed

chenxch mentioned this issue Jul 13, 2022

fix(components): [input] fix #8411 clearable icon show and hide unexpectly #8814

Closed

3 tasks

freedomlang mentioned this issue Aug 10, 2022

[Component] [input] el-input_suffix when hove is show, but el-input__wrapper with will increase #9024

Closed

This was referenced Aug 18, 2022

[Component] [input, button] Button 点击以后还是hover的样式, Input clearable 在鼠标hover时长短会变化 #9168

Closed

[Component] [input] el-input样式问题 #9304

Closed

HeftyKoo mentioned this issue Oct 19, 2022

[Bug Report] [Component] [input] input padding bug #7157

Closed

HeftyKoo mentioned this issue Nov 6, 2022

[Style] 在el-form中加样式display:flex时，input输入框出现删除图标会使输入框长度变化 #10372

Closed

MrWeilian added a commit to MrWeilian/element-plus that referenced this issue Nov 8, 2022

fix(components): [input] input width change by clearable (element-plu…

d93f265

…s#7287)

MrWeilian added a commit to MrWeilian/element-plus that referenced this issue Nov 8, 2022

fix(components): [input] input width change by clearable (element-plu…

f8684c2

…s#7287)

MrWeilian added a commit to MrWeilian/element-plus that referenced this issue Nov 8, 2022

fix(components): [input] input width change by clearable (element-plu…

75a088b

…s#7287) fix(components): [input] input width change by clearable (element-plus#7287)

MrWeilian added a commit to MrWeilian/element-plus that referenced this issue Nov 8, 2022

fix(components): [input] input width change by clearable (element-plu…

f45e8c4

…s#7287)

MrWeilian pushed a commit to MrWeilian/element-plus that referenced this issue Nov 8, 2022

rename variable (element-plus#10503)

21a927c

In version 2.2.17, use currentPage can't bind variable to current page. fix(components): [input] input width change by clearable (element-plus#7287)

MrWeilian mentioned this issue Nov 8, 2022

fix(components): [input] input width change by clearable (#7287) #10533

Closed

MrWeilian mentioned this issue Nov 8, 2022

fix(components): [input] input width change by clearable (#7287) #10534

Open

MrWeilian mentioned this issue Nov 29, 2022

[Component] 在 inline 布局的 form 中使用 input 组件的 clearable 属性会导致 input 宽度抖动 #10815

Closed

This was referenced Dec 10, 2022

[Style] [autocomplete] ElAutocomplete clearable = true时样式抖动 #10924

Closed

[Component] [input, form] form表单属性为inline的时候，input加上clearable属性，鼠标进入或划过input会使input宽度改变 #10957

Closed

This was referenced Feb 7, 2023

[Style] [input] el-input配置clearable后，清除图标的显示和隐藏会影响input框的宽度 #11436

Closed

[Component] [input] ElForm在设置inline属性时且ElInput设置clearable=true时的宽度不是固定的 #11370

Closed

MrWeilian mentioned this issue Mar 27, 2023

[Style] [input] 行内form中的input 在添加clearable后宽度变得不固定 #12207

Closed

MrWeilian mentioned this issue Apr 10, 2023

[Component] [input] input输入框添加clearable属性，鼠标移入移出长度不固定会频繁闪动 #12381

Closed

YunYouJun added the Community::Feature Request label May 18, 2023

tolking mentioned this issue May 21, 2023

feat(theme-chalk): [form] add default width to Input in inline form #12897

Merged

3 tasks

makedopamine mentioned this issue May 29, 2023

[Component] [input] [Component] [input] input组件的父元素样式设置了display:inline-block;，宽度未设置时，给input配置了一键清空，hover上去会改变文本框宽度，而Vue2.x的input组件没有该问题 #12962

Closed

YunYouJun closed this as completed in #12897 Jun 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug Report] [Component] [input] clearable 会动态改变宽度 #7287

[Bug Report] [Component] [input] clearable 会动态改变宽度 #7287

huang-yf3160 commented Apr 21, 2022

josonho commented Apr 21, 2022

huang-yf3160 commented Apr 21, 2022

YunYouJun commented Apr 27, 2022

emojiiii commented Apr 28, 2022

YunYouJun commented Apr 28, 2022

plainheart commented Apr 29, 2022 •

edited

YunYouJun commented Apr 29, 2022

plainheart commented Apr 30, 2022

YunYouJun commented Apr 30, 2022

tolking commented May 20, 2022 •

edited

chenxch commented Jul 13, 2022

tuutoo commented Jul 14, 2022 •

edited

agrass-GitHub commented Dec 28, 2022

KYX1234 commented Jan 15, 2023

yezimikk commented Apr 16, 2023

wzc520pyfm commented Apr 22, 2023

tolking commented Apr 23, 2023

YunYouJun commented May 17, 2023

tolking commented May 17, 2023

dengshenkk commented Jun 5, 2023

jummyliu commented Jun 27, 2023

strangePix commented Jun 27, 2023 •

edited

YunYouJun commented Jun 27, 2023

GuLinLing commented Dec 22, 2023 •

edited

[Bug Report] [Component] [input] clearable 会动态改变宽度 #7287

[Bug Report] [Component] [input] clearable 会动态改变宽度 #7287

Comments

huang-yf3160 commented Apr 21, 2022

Environment

Reproduction

Related Component

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Additional comments

josonho commented Apr 21, 2022

huang-yf3160 commented Apr 21, 2022

YunYouJun commented Apr 27, 2022

emojiiii commented Apr 28, 2022

YunYouJun commented Apr 28, 2022

plainheart commented Apr 29, 2022 • edited

YunYouJun commented Apr 29, 2022

plainheart commented Apr 30, 2022

YunYouJun commented Apr 30, 2022

tolking commented May 20, 2022 • edited

chenxch commented Jul 13, 2022

tuutoo commented Jul 14, 2022 • edited

agrass-GitHub commented Dec 28, 2022

KYX1234 commented Jan 15, 2023

yezimikk commented Apr 16, 2023

wzc520pyfm commented Apr 22, 2023

tolking commented Apr 23, 2023

YunYouJun commented May 17, 2023

tolking commented May 17, 2023

dengshenkk commented Jun 5, 2023

jummyliu commented Jun 27, 2023

strangePix commented Jun 27, 2023 • edited

YunYouJun commented Jun 27, 2023

GuLinLing commented Dec 22, 2023 • edited

plainheart commented Apr 29, 2022 •

edited

tolking commented May 20, 2022 •

edited

tuutoo commented Jul 14, 2022 •

edited

strangePix commented Jun 27, 2023 •

edited

GuLinLing commented Dec 22, 2023 •

edited