6 replies

Height Adjustment for StPageFlip

Hello everyone,

I'm working on a Vue 3 project where I'm using the StPageFlip https://nodlik.github.io/StPageFlip/ library to create a flipbook interface. The content of each page will vary in height, and I'm struggling to dynamically adjust the height of the PageFlip container to fit the content. The goal is to make sure the height of the flipbook adjusts to fit its content without any overflow or fixed height.

I've tried a few approaches, but the container height doesn't seem to adjust correctly. The height either remains fixed or doesn't fully fit the content.

Component

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

<template>
  <div ref="pageFlipContainer" class="page-flip-container">
    <Cover></Cover>
    <NewPage
      v-for="i in 10"
      :key="i"
      content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a est sed diam egestas gravida eu sit amet leo. Quisque fringilla elementum sapien, non venenatis ex. Nulla est nulla, viverra ac vestibulum non, maximus id lacus. Suspendisse tempor a turpis sed luctus. Fusce fringilla rutrum quam vel malesuada. In tellus libero, ornare ut lectus vel, hendrerit convallis dolor. Nullam sed gravida dolor. Maecenas interdum leo eros, ut volutpat eros fermentum quis. Vivamus posuere urna vel facilisis sollicitudin. Nam tempus sodales vestibulum. Nunc bibendum sagittis libero, ut dapibus dolor finibus sed. Aenean risus tortor, faucibus sed ultricies sit amet, ultricies vitae nunc. Vivamus vel scelerisque leo, gravida ornare diam. Duis rutrum odio vitae ante fermentum, in porta libero euismod."
      style-type="lined"
    ></NewPage>
    <Cover></Cover>
  </div>
  <div
    class="fixed bottom-5 left-1/2 transform -translate-x-1/2 flex justify-center items-center space-x-5"
  >
    <Button @click="turnToPreviousPage">Previous</Button>
    <Button @click="turnToNextPage">Next</Button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { PageFlip } from 'page-flip'
import Button from '~/components/form/Button/Button.vue'
import NewPage from '~/components/NewJournal/NewPage.vue'
import Cover from '~/components/NewJournal/Cover.vue'

const pageFlipContainer = ref(null)
const pageFlip = ref()
const turnToNextPage = () => pageFlip.value.flipNext()
const turnToPreviousPage = () => pageFlip.value.flipPrev()

onMounted(() => {
  pageFlip.value = new PageFlip(pageFlipContainer.value, {
    width: 550,
    height: 800,

    size: 'stretch',
    // set threshold values:
    minWidth: 315,
    maxWidth: 1000,
    minHeight: 500,
    maxHeight: 1350,

    maxShadowOpacity: 0.5, // Half shadow intensity
    showCover: true,
    mobileScrollSupport: true, // disable content scrolling on mobile devices
  })

  pageFlip.value.loadFromHTML(document.querySelectorAll('.page'))
})
</script>

<style scoped>
.page-flip-container {
  border: 2px aqua solid;
}

.page {
  width: 100%;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  line-height: 1.5;
}
</style>

StPageFlip - Simple library for creating realistic page turning eff...

Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect.

Height Adjustment for StPageFlip

Similar Threads

Similar Threads

Similar Threads