Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: improve api for controlling modal size with datetime

See original GitHub issue

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x

Current Behavior

When using ion-datetime in a modal as suggested by the documentation:

<ion-button id="open-modal">Open Datetime Modal</ion-button>
    <ion-modal trigger="open-modal">
    <ion-content>
        <ion-datetime></ion-datetime>
    </ion-content>
</ion-modal>

the modal is opened fullscreen and it looks nothing like the example in docs.

Expected Behavior

Modal shouldn’t have background, datetime should be centered.

Steps to Reproduce

Use the above mentioned example code in an Ionic Vue project.

Code Reproduction URL

https://github.com/dftd/ionic-6-vue-datetime-modal

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/vue 6.0.0-rc.3

Capacitor:

Capacitor CLI : 3.3.2 @capacitor/android : not installed @capacitor/core : 3.3.2 @capacitor/ios : not installed

Utility:

cordova-res (update available: 0.15.4) : 0.15.3 native-run : 1.5.0

System:

NodeJS : v16.13.0 (/usr/local/bin/node) npm : 6.14.15 OS : Linux 5.15

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

4reactions

liamdebeasicommented, Dec 6, 2021

Thanks for the issue. Modal does not currently make any assumptions about the content inside of it, so it is on the user to ensure the modal is properly sized. For now, you will need to use the --width and --height CSS Variables on ion-modal to get the modal size properly.

It was previously discussed (I think in https://github.com/ionic-team/ionic-framework/issues/23518) to have an API for modal that automatically snaps to fit the size of the inner content. Now that we have more use cases, it might be worth looking into this a bit more. This may not end up being the correct solution, but regardless I think this developer experience needs to be improved a bit.

1reaction

liamdebeasicommented, Jul 27, 2022

Great! Let me know if you run into any issues with the migration.

Top Results From Across the Web

Bootstrap Modal Sizing - free examples & tutorial

Responsive popup window sizing with Bootstrap 5. Modal width, modal height, fullscreen modal, large modal with lg & xl modal classes and more....

How to increase Bootstrap Modal Width? - Stack Overflow

In your code, for the modal-dialog div, add another class, modal-lg : <div class="modal-dialog modal-lg">. Or if you wanna centre your modal dialog,...

PrimeNG - PrimeFaces

Over 80 Angular UI Components with top-notch quality to help you implement all your UI requirements in style. Get Started. Balance.

ion-modal: Ionic Mobile App Custom Modal API Component

ion-modal is a dialog that appears on top of mobile app content, and must be dismissed before interaction resumes. Learn more about custom...

material ui text field

API documentation for the React TextField component. Take another look at the overrides code ... We can change the size of a text...