New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Input.Group组件box-shadow效果被遮盖 #10230

Closed
SeanGol opened this Issue Apr 24, 2018 · 2 comments

Comments

Projects
None yet
4 participants
@SeanGol

SeanGol commented Apr 24, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.3

Environment

任意环境(官网demo即可重现)

Reproduction link

https://ant.design/components/input-cn/#components-input-demo-group

Steps to reproduce

(官网demo即可重现)
使用Input.Group组件,并设置compact属性为true,
Input.Group组件内部嵌套两个以上任意Input、select组件均可

当在填写group中的某一输入框时,box-shadow属性效果被遮盖

What is expected?

每个内部嵌套的组件处于:focus状态时,right侧的box-shadow属性效果不被遮盖
image
image

What is actually happening?

每个内部嵌套的组件处于:focus状态时,right侧的box-shadow属性效果被下一组件遮盖
image
image


建议修复方案:
ant-design/components/input/style/mixin.less(270行)
去除z-index: auto属性

并在每个被嵌套的组件添加
&:focus {
z-index: 1;
border-right-width: 1px;
}

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Apr 24, 2018

Translation of this issue:


Input.Group component box-shadow effect is covered

  • [] I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.3

Environment

Any environment (the official website demo can reproduce)

Reproduction link

https://ant.design/components/input-cn/#components-input-demo-group

Steps to reproduce

(The official website demo can reproduce)
Use the Input.Group component and set the compact property to true,
The Input.Group component nests more than two arbitrary Input and select components.

When you fill in an input box in the group, the box-shadow attribute effect is obscured

What is expected?

When each nested component is in the :focus state, the right side of the box-shadow attribute is not obscured
image
image

What is actually happening?

Each nested component is in the :focus state, the right side of the box-shadow attribute effect is covered by the next component
image
image


Suggested repair plan:
Ant-design/components/input/style/mixin.less (line 270)
Remove the z-index: auto attribute

And add in each nested component
&:focus {
  Z-index: 1;
  Border-right-width: 1px;
}

@wmzhong

This comment has been minimized.

Contributor

wmzhong commented May 12, 2018

I will handle this issue.

@afc163 afc163 referenced this issue May 20, 2018

Merged

release 3.5.3 #10586

bors bot added a commit to mozilla/delivery-console that referenced this issue May 21, 2018

Merge #163
163: Update dependency antd to v3.5.3 r=rehandalal a=renovate[bot]

This Pull Request updates dependency [antd](https://github.com/ant-design/ant-design) from `v3.5.2` to `v3.5.3`



<details>
<summary>Release Notes</summary>

### [`v3.5.3`](https://github.com/ant-design/ant-design/releases/3.5.3)
[Compare Source](ant-design/ant-design@3.5.2...3.5.3)
- 🐞 Fix `Affix` with offsetTop === 0, value becomes `undefined` problem [#&#8203;10566](`ant-design/ant-design#10566)
- 🐞 Fixed issue with shaded `Input.Group` component shadows[#&#8203;10230](`ant-design/ant-design#10230)
- 🐞 Fixed issue where the `Transfer` component checkbox event fired twice [#&#8203;10480](`ant-design/ant-design#10480)
- 💄 Unifying the name of the variable [12d3046](ant-design/ant-design@12d3046)
- 💄 Fine-tuned the style of `Dropdown` [8e2f72f](ant-design/ant-design@8e2f72f)
- 💄 The components of the Chinese document will now be demonstrated using Chinese language packages. [9b17a94](ant-design/ant-design@9b17a94)
- 💄 The main theme switch was changed to `antd-theme-generato`, thanks to the work of [@&#8203;mzohaibqc].
- TypeScript
  - 🐞 Fixed an issue with the type of gutter attribute in `Row` [b7d508e](ant-design/ant-design@b7d508e)
  - 💄 Improved the `Form` component type [#&#8203;10564](`ant-design/ant-design#10564)
  - 💄 Improved the `Button` and `Tag` types[1ed9fed](ant-design/ant-design@1ed9fed)


---


- 🐞 修复了 `Affix` 当 `offsetTop === 0`, 值将变为 `undefined` 的问题 [#&#8203;10566](`ant-design/ant-design#10566)
- 🐞 修复了 `Menu` item 中的高亮链接颜色问题 [09d5e36](ant-design/ant-design@09d5e36)
- 🐞 修复了 `Input.Group` 组件阴影被遮盖的问题 [#&#8203;10230](`ant-design/ant-design#10230)
- 🐞 修复了 `Transfer` 组件 checkbox 事件触发两次的问题 [`#10480`](`ant-design/ant-design#10480)
- 💄 统一 less 的变量命名 [12d3046](ant-design/ant-design@12d3046)
- 💄 微调了 `Dropdown` 的样式 [8e2f72f](ant-design/ant-design@8e2f72f)
- 💄 现在中文文档的组件会用中文语言包进行演示。[9b17a94](ant-design/ant-design@9b17a94)
- 💄 主站主题切换 修改为 `antd-theme-generato` ,感谢 [@&#8203;mzohaibqc] 的工作.
- TypeScript
  - 🐞 修复了 `Row` 中 gutter 属性的类型问题 [b7d508e](ant-design/ant-design@b7d508e)
  - 💄 改进了 `Form` 组件类型 [#&#8203;10564](`ant-design/ant-design#10564)
  - 💄 改进了 `Button` 和 `Tag` 类型 [1ed9fed](ant-design/ant-design@1ed9fed)

---

</details>




---

This PR has been generated by [Renovate Bot](https://renovatebot.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment