calendar widget doesnt take up the available screen width
vnsaravanakumar opened this issue · comments
This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.
Describe the bug
We use clrDate directive in an input tag inside clr-date-container, when the width narrow the calendar doen't take up the full available width, instead it just moves to the right hiding some of the calendar.
How to reproduce
https://stackblitz.com/edit/clarity-light-theme-clr15-2zqz8m?file=src%2Fapp%2Fapp.component.html
Steps to reproduce the behavior:
- Go to the above stackblitz link
- reduce the width of the screen a bit less than the calendar width
- half of the calendar is hidden instead of displaying the calendar in the middle of the available screen width
Expected behavior
Calendar could take up the available width and display in the middle of the screen
Versions
Clarity version:
- v13.x
- v15.x
- Other:
Framework version:
_ie: Angular 15_2_9
Device:
- Type: MacBook [e.g. MacBook]
- OS: mac OS 13.5.2 (22G91) [e.g. iOS]
- Browser: chrome [e.g. chrome, safari]
- Version: 116.0.5845.179 [e.g. 22]
Additional notes
Add any other notes about the problem here.
Have you tried putting a datepicker inside a form? Check this Stackblitz. Datepicker adjusts itself in the available width if specified within a form.
Have you tried putting a datepicker inside a form? Check this Stackblitz. Datepicker adjusts itself in the available width if specified within a form.
As shown in the Stackblitz there are stylings that apply once you put it inside a form which makes it responsive.
Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.