mukaschultze / nativescript-windowed-modal

Consistent modals for Android and iOS
https://www.npmjs.com/package/nativescript-windowed-modal
Apache License 2.0
47 stars 18 forks source link

Full screen modal height doesn't respect default bottom menu on android platform #14

Open aljaz00 opened 5 years ago

aljaz00 commented 5 years ago

image I'm using nativescript-windowed-modal@6.0.0 and NS6.

Thanks for helping me out.

mukaschultze commented 5 years ago

Can you please provide a code example to reproduce this issue?

aljaz00 commented 5 years ago

image

<template>
  <ModalStack>
    <GridLayout rows="auto, *, auto" columns="*">
      <StackLayout row="0" background="red">
        <Label
          text="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque vel dolores consequatur beatae reiciendis veniam corporis vitae. Qui aperiam veniam labore fugit autem fugiat deserunt dolorum quidem eius, esse reprehenderit!"
          textWrap="true"
          color="white"
        />
      </StackLayout>
      <StackLayout row="1" background="blue"> </StackLayout>
      <StackLayout row="2" background="green">
        <Label
          text="Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque vel dolores consequatur beatae reiciendis veniam corporis vitae. Qui aperiam veniam labore fugit autem fugiat deserunt dolorum quidem eius, esse reprehenderit!"
          textWrap="true"
          color="white"
        />
      </StackLayout>
    </GridLayout>
  </ModalStack>
</template>

As you can see the text is chopped at the top and at the bottom.

Thanks for help!

mukaschultze commented 5 years ago

Try running tns plugin remove nativescript-windowed-modal && tns plugin add nativescript-windowed-modal@next and see if the problem is fixed.

aljaz00 commented 5 years ago

Hey, you fixed that problem but create a new one. Now when using a non-fullscreen modal, you can't set the position of the modal, so modal is always in the middle. Of course for android only, IOS is working as expected.

I saw your fix and think a bit about how to solve this new problem:

  1. The solution will be to check if modal is in fullscreen (if possible) and disable height calculation,
  2. Calculate the height of bottom navbar and decrease the current height like so: currentHeight - navbarHeight

Thanks for solving this problem!

romandrahan commented 5 years ago

Same for me 👆on Android.

cc @aljaz00 @mukaschultze

Tyler-V commented 4 years ago

I can confirm this as well.