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

Calendar in DatePicker is not positioned right #9220

Closed
2 tasks done
fabpico opened this issue Jul 19, 2021 · 1 comment
Closed
2 tasks done

Calendar in DatePicker is not positioned right #9220

fabpico opened this issue Jul 19, 2021 · 1 comment
Labels
status: needs triage 🕵️‍♀️ status: waiting for author's response 💬 type: bug 🐛

Comments

@fabpico
Copy link
Contributor

fabpico commented Jul 19, 2021

What package(s) are you using?

  • carbon-components 10.35.0
  • carbon-components-react 7.35.0

Detailed description

I am using DatePicker variant "single with calendar". I noticed that the width of the component is fixed to 18rem, matching the calendar popup width. My inspection shows this predefined CSS.

.bx--date-picker.bx--date-picker--single .bx--date-picker__input {
    width: 18rem;
}

But my forms have dynamic input widths, so I made the DatePicker also with a dynamic width. The problem now is, that the calendar is positioned left, away from the calendar icon.

I would expect the calendar to remain right, where the calendar icon is.

This flatpickr calendar is somehow positioned outsite of the react app, appended in the <body>. Its CSS has some magic left positioning

// in codesandbox where no sorrounding padding exists
element.style {
    top: 66px;
    left: 0px;
    right: auto;
}

// in storybook where a padding around a story exists
element.style {
    top: 262px;
    left: 42.5px;
    right: auto;
}

It is anyways left aligned to the input field.

Is there any way to define the position? In the source code, neither in DatePicker nor in DatePickerInput I find something with position.

Steps to reproduce the issue

  1. Go to https://codesandbox.io/s/confident-black-cm74p?file=/src/MyFancyDatePicker.scss
  2. Click on the calendar icon.
@tay1orjones
Copy link
Member

Hi @FabianPiconeDev, this relates to the fluid inputs proposal that is approved but still a work in progress. The calendar remaining left aligned on a fluid width input is to spec based on the images in the linked issue.

Is there any way to define the position?

The positioning is determined by the appendToPlugin that is passed to flatpickr. To modify positioning of the calendar you can target the .flatpickr-calendar class with custom CSS, or another potential route would be to customize the dom element that the flatpickr is inserted into via the appendTo prop.

Let me know if this is helpful - I'm going to close this for now, but can always reopen if there's a continued issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: needs triage 🕵️‍♀️ status: waiting for author's response 💬 type: bug 🐛
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tay1orjones @fabpico