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] Make text separator correctly aligned vertically #15981

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

good-jinu
Copy link
Contributor

@good-jinu good-jinu commented Dec 22, 2024

  • Update style of MultiInput...RangeField Root and Seperator

Fixes #15847

Root cause

The root cause of this issue is the misalignment of the three elements. They are currently centered based on the height of the TextField element, which includes the helper text. This is causing the elements to appear misaligned when the helper text is present or has varying lengths.

11

What is changed

  • 3 MultiInput...RangeField Files
    • MultiInputDateRangeField
    • MultiInputDateTimeRangeField
    • MultiInputTimeRangeField : This feature isn't implemented yet. But it needed to be modified as the same issue occurs
  • Set three elements aligned to top
  • Set seperator padding value as same as picker TextField Component.

To minimize additional bugs and PR, I chose the simplest method.

Before

codesandbox

33

After

codesandbox

22

- Update style of MultiInput...RangeField Root and Seperator
@good-jinu good-jinu changed the title Update style [RangePicker] Make text separator correctly aligned vertically Dec 22, 2024
@mui-bot
Copy link

mui-bot commented Dec 22, 2024

Deploy preview: https://deploy-preview-15981--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 326b7c3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[pickers][DateRangePicker] Text separator not correctly aligned vertically when displaying a helperText
2 participants