ionic-team / ionic-team/ionic-framework

bug: ion-datetime within a triggered ion-modal does not match heights when outside of ion-modal

Open
#29,589 1 comment 0 reactions 0 assignees View on GitHub
type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v8.x

### Current Behavior

Select the date '13, June 2024' the background blue circle will cover the bottom of '6, June 2024'.

But it will not happen in other months.

### Expected Behavior

Keep the same line height in every month.

### Steps to Reproduce

https://stackblitz.com/edit/angular-bqf3pd

see the screen recording.

https://github.com/ionic-team/ionic-framework/assets/17242425/e36e6b2c-6173-4670-8bfc-2d39beab5499

### Code Reproduction URL

https://stackblitz.com/edit/angular-bqf3pd

### Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 8.1.0
@angular-devkit/build-angular : 17.3.6
@angular-devkit/schematics : 17.3.6
@angular/cli : 17.3.6
@ionic/angular-toolkit : 11.0.1

Capacitor:

Capacitor CLI : 6.0.0
@capacitor/android : 6.0.0
@capacitor/core : 6.0.0
@capacitor/ios : 6.0.0

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v18.13.0 (/usr/local/bin/node)
npm : 8.19.3
OS : macOS Unknown

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare ion-datetime rendering inside a triggered ion-modal with the same component outside it. Investigate the month layout around 13 June 2024; done when every month keeps consistent line heights and the selected date does not overlap the preceding row.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.