Description
I'm stumped on how to fix this issue. My only remaining conclusion is that something must be amiss in the vue-js-modal component.
I've created a test site to demonstrate the issue:
https://test.cicsolutions.com
Issue Description:
More-complicated modals are not vertically centering on mobile devices, however they are centering properly in desktop browsers. I'm performing my mobile testing on my iPad and iPhone, using Safari, Chrome and FireFox. All mobile browsers are displaying the same results.
For some reason, very basic modals that have no additional parameters other than the required 'name' parameter are not displaying this issue. Basic modals seem to display vertically centered in mobile browsers, as demonstrated on my test.cicsolutions.com testing page.
Expected Results:
Modal should display vertically and horizontally centered in the mobile viewport.
Actual Results:
Modal displays horizontally centered, but vertically, the top of the modal is about lined up with the center of the view port. If the vertical size of the modal changes, as in the SizeModal.vue demo component, the modal height grows down and the modal does not reposition vertically to keep the modal vertically centered.
Additional Notes:
This vertical positioning issue seems to only exist in mobile browsers. My above test page functions as expected in desktop browsers.
When I test your vue-js-modal demo page on my iPad or iPhone, I do not see this issue. This would lead me to believe that the issue would be in my code somewhere, however, I've created the test.cicsolutions.com demo site specifically to strip out all of my custom css that may affect the modal, and the issue persists.
Next, I would wonder if perhaps the modals on the vue-js-modal demo page are being instantiated and called differently that how I am implementing the component.
Below is my code for implementing the 'basic modal' and the 'size-modal' component on test.cicsolutions.com.
SizeModal.vue Component:
<template>
<modal name="size-modal"
transition="nice-modal-fade"
classes="demo-modal-class"
:min-width="200"
:min-height="200"
:pivot-y="0.5"
:adaptive="true"
:scrollable="true"
:reset="true"
width="60%"
height="auto"
@before-open="beforeOpen"
@opened="opened"
@closed="closed"
@before-close="beforeClose">
<div class="size-modal-content">
<div>A new paragraph will be added every 5 sec to show how <b>height</b> scales.</div>
<div v-for="(p, i) in paragraphs" :key="i">
<p>This modal DOES NOT display properly vertically centered on mobile devices. It displays below the vertical center and as the modal grows vertically, it grows down, without repositioning vertically to recenter the modal.</p>
<p>Modal Code:</p>
<p>This modal uses the code provided in the <a href="/euvl/vue-js-modal/blob/master/demo/client_side_rendering/src/components/modals/SizeModal.vue" target="_blank">SizeModal.vue demo component.</a></p>
<hr>
</div>
</div>
</modal>
</template>
<script>
export default {
name: 'SizeModalTest',
data () {
return {
paragraphs: [true],
timer: null
}
},
methods: {
beforeOpen () {
this.timer = setInterval(() => {
this.paragraphs.push(true)
}, 5000)
},
beforeClose () {
clearInterval(this.timer)
this.timer = null
this.paragraphs = []
},
opened (e) {
// e.ref should not be undefined here
console.log('opened', e)
console.log('ref', e.ref)
},
closed (e) {
console.log('closed', e)
}
}
}
</script>
<style>
.size-modal-content {
padding: 10px;
font-style: 13px;
}
.v--modal-overlay[data-modal="size-modal"] {
background: rgba(0, 0, 0, 0.5);
}
.demo-modal-class {
border-radius: 5px;
background: #F7F7F7;
box-shadow: 5px 5px 30px 0px rgba(46,61,73, 0.6);
}
</style>
Testing Site Code:
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" id="csrf-token">
<title>CICS Test Site</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 12px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
[v-cloak] {display: none}
</style>
</head>
<body>
<div id="app">
<div class="content">
<div class="title m-b-md">
vue-js-modal testing
</div>
<div class="links">
<a href="javascript: void(0);" @click="$modal.show('basic-modal')">Show Basic Modal</a>
<a href="javascript: void(0);" @click="$modal.show('size-modal')">Show Size Modal</a>
</div>
</div>
<size-modal v-cloak></size-modal>
<modal name="basic-modal" v-cloak>
<p>This modal displays properly vertically centered on mobile devices. It has no additional modal params, other than the required 'name' param.</p>
<p>Modal Code:</p>
<pre><code><modal name="basic-modal">modal content here</modal></code></pre>
</modal>
</div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
app.js File:
require('./bootstrap');
window.Vue = require('vue');
import VModal from 'vue-js-modal';
Vue.use(VModal);
Vue.component('size-modal', require('./components/SizeModal.vue'));
const app = new Vue({
el: '#app'
});
I am truly stumped. I've tried everything I can think of to get the modals to display vertically centered on mobile devices with no success. I've omitted and included every component parameter with no success. I've tried overriding the modal CSS using flexbox to center the modal, but since the component javascript is positioning the modal with inline styles, my CSS will never override the inline position settings.
Any support you can offer is tremendously appreciated! Please let me know if I can provide any additional information to help troubleshoot this issue. I feel I have followed all the instructions for using the vue-js-modal component properly.