Hi guys!
I’m going crazy with this component. Basically, I have a filter called “Date” inside a data table. When this filter is clicked, it opens a choice list. If I click the last option, “Custom”, a calendar appears so the user can filter by date, just like in Finance > Payouts.
The problem is that here the calendars are not aligned! As you can see, the arrows are not on the same line as the month name.
I hope we can find a solution for this!
Hey @marconappa30 - thanks for flagging this.
I was able to reproduce the date picker header alignment issue with a custom date range inside a filter pill, and we’re looking into this on our end.
In the meantime, I was able to get the month label and navigation arrows lined up in my local repro with this CSS:
.Polaris-DatePicker__Header {
top: 0;
left: 0;
right: 0;
width: auto;
}
I’d keep this scoped to the wrapper for that specific custom date filter if your app uses DatePicker elsewhere, so the override only affects this popover.
EDIT: I should clarify that my local repro was using the React Polaris DatePicker component and I don’t know from your post whether your app is using React Polaris or the current Polaris Web Components.
React Polaris is deprecated, so I’d treat the CSS override above as a temporary workaround only if you’re staying on the React component for now. I tested the same custom date range setup with the current Polaris Web Components <s-date-picker>, and I’m not seeing the same header alignment issue there.
If you’re able to move this filter to Polaris Web Components, that’s the path I’d recommend over relying on the internal .Polaris-DatePicker__Header selector. The web component docs are here: Date picker
Hope this helps!
Thank you very much, Wes. I was able to resolve the issue I had with this solution.
Best regards,
Marco