[SOLVED] How to make a popup that animates to half screen

Hi. I am developing a mobile app with vuejs and using framework 7 for the UI. How to make a popup that animates to half screen, not full height ? I can not find that info in the docs

I have popups both with f7 and f7 f7vue mixed

f7vue only

        f7-navbar(title='Vibration Settings')
            f7-link(popup-close='') Close1
        f7-block-title PREFERRED SETTINGS
         f7-list-item(:key='1', checkbox='', name='my-checkbox', :value='1', :title="'Call Mode'")
         f7-list-item(:key='2', checkbox='', name='my-checkbox', :value='2', :title="'IM Mode'")

native f7 and f7vue mixed

            .title Language Settings
            .right(@click="closePopupLanguage") Close
        | Please select the language you prefer.

reading the docs:

Popup Size
By default Popup has a bit different size on phones and tablets (iPad). On phones it is fullscreen while on tablets it is 630px width and height. If you want to make it fullscreen size on tablets, you should add additional “popup-tablet-fullscreen” class to the required popup

So by definition popus has ONLY two sizes fullscreen on phones and 630px x 630px on tablets. Thats the way it was designed.
If you need a special height you should do it your self. but i dont know how it will work on animation.

Does sheet modals (vue doc) fit your needs? To make it take up half the screen you will need to add this class to your .sheet-modal / f7-sheet element:

.sheet-modal-large {    
    height: 50vh !important;
1 Like