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.

Sign up for GitHub

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

Jump to bottom

[pickers][DateRangePicker] Text separator not correctly aligned vertically when displaying a helperText #15847

Open
maproulx-innov opened this issue Dec 11, 2024 · 2 comments · May be fixed by #15981
Open

[pickers][DateRangePicker] Text separator not correctly aligned vertically when displaying a helperText #15847

maproulx-innov opened this issue Dec 11, 2024 · 2 comments · May be fixed by #15981
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/

Comments

@maproulx-innov
Copy link

maproulx-innov commented Dec 11, 2024 •
edited by github-actions bot
Loading

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/heuristic-bash-p4k6wt
  2. Notice the vertical alignment of the text separator in the first DateRangePicker
  3. Compare to the vertical alignment of the text separator in the second DateRangePicker

Current behavior

The text separator is vertically centered relative to the height of the TextField and the helperText.
I used slotProps={{ field: { dateSeparator: "to" }, }} to show it more clearly, but it's the same behavior with the default text separator.

Expected behavior

The text separator should be vertically centered relative to the height of the TextField only.

Context

No response

Your environment

npx @mui/envinfo 
System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (131.0.2903.86)
  npmPackages:
    @emotion/react: 11.13.5 => 11.13.5
    @emotion/styled: 11.13.5 => 11.13.5
    @mui/core-downloads-tracker:  6.1.9
    @mui/envinfo: ^2.0.30 => 2.0.30
    @mui/icons-material: 6.1.9 => 6.1.9
    @mui/material: 6.1.9 => 6.1.9
    @mui/private-theming:  6.1.9
    @mui/styled-engine:  6.1.9
    @mui/system: 6.1.9 => 6.1.9
    @mui/types:  7.2.19
    @mui/utils: 6.1.9 => 6.1.9
    @mui/x-charts: 7.23.0 => 7.23.0
    @mui/x-charts-vendor:  7.20.0
    @mui/x-data-grid: 7.23.0 => 7.23.0
    @mui/x-date-pickers-pro: 7.23.1 => 7.23.1
    @mui/x-internals:  7.23.0
    @mui/x-license: 7.23.0 => 7.23.0
    @types/react: 18.3.12 => 18.3.12
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    typescript: 5.4.5 => 5.4.5

Search keywords: daterangepicker helperText
Order ID: 103632
@maproulx-innov maproulx-innov added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Dec 11, 2024
@github-actions github-actions bot added component: pickers This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/ labels Dec 11, 2024
@flaviendelangle
Copy link
Member

I'm adding it to the board for grooming 👍
This is definitely not the intended behavior

@michelengelen michelengelen removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 12, 2024
@good-jinu
Copy link
Contributor

good-jinu commented Dec 22, 2024 •
edited
Loading

Hi, there!

I've run into a similar problem before when aligning MuiTextField with other components.

Root cause

As you know, 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

Solutions

  • Let users directly modify the style in the slot
    • pros👍: No changes needed in MUI-X.
    • cons👎: Responsibility is handed over to the user.
  • Directly style the alignment or Seperator component
    • pros👍: Simplest method as it involves direct styling.
    • cons👎: Vulnerable to changes such as users setting different sizes for the TextField.
  • Match the Seperator component with the TextField component and refactor the styles
    • pros👍: Adapts to changes in the TextField size.
    • cons👎: Most complex method and could introduce new issues.

If you wouldn't mind, I'd like to suggest "Directly style the alignment or Seperator component" as it is the simplest way.

@good-jinu good-jinu linked a pull request Dec 22, 2024 that will close this issue
Open
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module! support: pro standard Support request from a Pro standard plan user. https://mui.com/legal/technical-support-sla/
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[RangePicker] Make text separator correctly aligned vertically good-jinu/mui-x
4 participants
@flaviendelangle @michelengelen @good-jinu @maproulx-innov