IonSlide shows the next slide partially, how to prevent this?

Ionic Framework Ionic Vue
1

I created a slides, some part of the slide are visible on the current slide, how can I prevent this?

image
image406×721 18.1 KB

EducationCreate.vue

<template>
  <CInteractiveScrollView
    title="New Education"
    primaryButtonText="Next"
    @clickBackButton="slidePrevOrBack"
    @clickPrimaryButton="slideNextOrSubmit"
  >
    <IonSlides
      :options="slidesOptions"
      @ionSlidesDidLoad="onSlidesDidLoad"
      @ionSlideDidChange="onSlidesDidChange"
    >
      <FormDetail />
      <FormField />
      <FormField />
      <FormField />
    </IonSlides>
  </CInteractiveScrollView>
</template>

<script lang="ts">
  ...
  export default defineComponent({
    name: 'EducationCreatePage',
    components: {
      ...
    },
    setup() {
      ...
      const slidesOptions = {
        preventInteractionOnTransition: true,
        allowSlidePrev: false,
        allowSlideNext: false,
      }
      ...

      return {
        ...
        slidesOptions,
        ...
      }
    },
  })
</script>

<style scoped>
  #content {
    --padding-bottom: 40px;
  }

  #page-navigator {
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    transition: bottom 0.2s ease-in-out;
    box-shadow: inset 0px -100px 109px -80px rgba(0, 0, 0, 1);
  }

  #page-navigator.hidden {
    bottom: -100px;
  }
</style>

FormField.vue

<template>
  <IonSlide>
    <IonList>
      <IonItem v-for="field in educationFields" :key="field.id">
        <IonLabel>{{ field.name }}</IonLabel>
      </IonItem>
    </IonList>
  </IonSlide>
</template>
<script lang="ts">
  ...
  export default defineComponent({
    name: 'FormField',
    components: {
      ...
    },
    setup() {
      const {
        educationFields,
        fetchEducationField,
      } = useEducationFieldComposition()
      onBeforeMount(() => fetchEducationField())

      const search = (e: Event & { target: HTMLInputElement }) => {
        console.log(e.target.value)
      }

      return {
        educationFields,
        search,
      }
    },
  })
</script>
2

Forcing the ion-list with max-width: 100% solves it.

ion-list {
  max-width: 100% !important;
}
1 Like