Skip to content
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

RangePicker the triangle sign was not positioned correctly in some cases #51071

Open
HaceraI opened this issue Sep 29, 2024 · 4 comments · May be fixed by react-component/picker#886
Open

RangePicker the triangle sign was not positioned correctly in some cases #51071

HaceraI opened this issue Sep 29, 2024 · 4 comments · May be fixed by react-component/picker#886
Labels
🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.

Comments

@HaceraI
Copy link

HaceraI commented Sep 29, 2024

Reproduction link

Edit on StackBlitz

Steps to reproduce

click any RangePicker component

What is expected?

the triangle mark should be in the correct position

What is actually happening?

the triangle sign always seems to be on the left

Environment Info
antd 5.21.1
React 18.3.1
System Windows 11
Browser Version 129.0.6668.60 (Official Build) (64-bit)

To reproduce, I changed the demo to a flex-end layout. Normally, when a search form is used and the datepicker component is the last element in a row
image

Copy link

stackblitz bot commented Sep 29, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

Copy link

The search results did not directly point to the specific code responsible for the triangle sign's positioning in the DatePicker component. However, based on the issue description and the typical structure of Ant Design components, the problem might be related to the CSS styling of the DatePicker component.

Let's propose a potential fix by adjusting the CSS to ensure the triangle sign is correctly positioned. We can add a CSS rule to handle the flex-end layout scenario.

Here is a proposed CSS modification:

/* Add this CSS rule to ensure the triangle sign is correctly positioned */
.ant-picker-dropdown {
  .ant-picker-range-arrow {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

This CSS rule targets the dropdown of the DatePicker component and ensures that the triangle sign is centered horizontally when the DatePicker is used in a flex-end layout.

Please add this CSS rule to your project's stylesheet and see if it resolves the issue. If the problem persists, further investigation into the component's implementation might be necessary.

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

@HaceraI HaceraI changed the title DatePicker the triangle sign was not positioned correctly in some cases RangePicker the triangle sign was not positioned correctly in some cases Sep 29, 2024
@afc163 afc163 added 🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. and removed unconfirmed labels Sep 29, 2024
Copy link
Contributor

Hello @HaceraI. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @HaceraI,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支(新特性发到 feature 分支,其他发到 master 分支),务必填写 Pull Request 内的预设模板,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待您的贡献。

giphy

@bbb169
Copy link
Contributor

bbb169 commented Oct 24, 2024

https://github.com/react-component/picker/blob/281bf3799b70838296b553632d885fc3b38ce1ca/src/PickerInput/Popup/index.tsx#L217
主要是这处的问题,trrigger自己改了popupAligin为tr,但是外面没有收到,依旧是以tl来判断offsetUnit,所以展示出了问题 明天继续看看

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants