3
0

Fix bottom part of page being cut off for ios

This commit is contained in:
Katrin Yordanova
2024-06-12 09:53:18 +03:00
parent 53e0a53888
commit 08fd291cf6
5 changed files with 55 additions and 4 deletions

View File

@@ -73,7 +73,7 @@
}"
/>
</template>
<div class="d-flex flex-column w-100 flex-fill">
<div class="d-flex flex-column w-100 flex-fill pb-safari">
<router-view />
</div>
</main>
@@ -224,3 +224,13 @@ export default {
},
}
</script>
<style scoped>
/* fixes bottom part of page being cut off */
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
.pb-safari {
padding-bottom: 5.5em;
}
}
</style>

View File

@@ -27,6 +27,7 @@
<router-view
v-if="loaded"
class="pb-safari"
/>
</div>
</template>
@@ -87,3 +88,13 @@ export default {
},
}
</script>
<style scoped>
/* fixes bottom part of page being cut off */
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
.pb-safari {
padding-bottom: 5.5em;
}
}
</style>

View File

@@ -69,7 +69,7 @@
</template>
<div
class="d-flex flex-column w-100"
class="d-flex flex-column w-100 pb-safari"
>
<router-view
class="flex-grow-1 overflow-auto"
@@ -130,3 +130,13 @@ export default {
},
}
</script>
<style scoped>
/* fixes bottom part of page being cut off */
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
.pb-safari {
padding-bottom: 5.5em;
}
}
</style>

View File

@@ -71,7 +71,7 @@
</template>
<div
class="d-flex flex-column w-100"
class="d-flex flex-column w-100 pb-safari"
>
<router-view
class="flex-grow-1 overflow-auto"
@@ -184,3 +184,13 @@ export default {
},
}
</script>
<style scoped>
/* fixes bottom part of page being cut off */
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
.pb-safari {
padding-bottom: 5.5em;
}
}
</style>

View File

@@ -50,7 +50,7 @@
</c-sidebar>
</aside>
<main class="d-inline-flex h-100 overflow-auto">
<main class="d-inline-flex h-100 overflow-auto pb-safari">
<!--
Content spacer
Large and xl screens should push in content when the nav is expanded
@@ -144,3 +144,13 @@ export default {
},
}
</script>
<style scoped>
/* fixes bottom part of page being cut off */
/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
.pb-safari {
padding-bottom: 5.5em;
}
}
</style>