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

Questions
1

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-popup#popupVibration
    f7-view
      f7-page
        f7-navbar(title='Vibration Settings')
          f7-nav-right
            f7-link(popup-close='') Close1
        f7-block-title PREFERRED SETTINGS
        f7-list(form='')
         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

  f7-popup#popupLanguage
    f7-view
      .page
        .navbar
          .navbar-inner
            .title Language Settings
            .right(@click="closePopupLanguage") Close
        f7-block
        | Please select the language you prefer.
2

Hi,
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.

3

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