Style issues on mobile devices when using forms within modal?

[samhibberd]

It looks like there are some display issues when using forms within modals on mobile devices.

Take the iPhone as an example, on both Safari & Chrome, if you use touch to navigate input fields you get strange behaviour with chopped off modals and jumping around.

See: http://cl.ly/image/161b3F1M073T

Seems to be find if you use the keyboard nav tools to navigate inputs.

Any ideas??

Many thanks,

Sam

[AlecRust]

Are the inputs set to a minimum of 16px font size as-per this plugin's stylesheet?

Also see: twbs/bootstrap#14975

[samhibberd]

They are all set above 16px (18px in this case) to avoid the iOS zoom / focus issue, so i'm not sure its that??

[AlecRust]

Is it every type of form input? What happens on focus exactly, the modal jumps up?

[samhibberd]

Yes, just input, no selects, behaviour is as follows:

1. Modal triggered
2. Touch input
3. Keyboard pops up, input focuses fine.
4. Touch another input, modal shifts up as shown in the example image: http://cl.ly/image/161b3F1M073T

NB. Intermittently the keyboard decides to hide itself completely at 4)

It looks to be issues with the fixed layout and bits getting chopped off!

[AlecRust]

Sounds like the keyboard opening is pushing the modal, similar to this issue: twbs/bootstrap#9023

[hirbod]

ping

[fny]

Also clicking the done button on iOS ends up freezing the whole shebang pretty badly.

[vodkabears]

Any suggestions? I have only one – change CSS and switch from fixed position.

[vodkabears]

And i still hope that someday it will be fixed by Apple.

[vodkabears]

But who cares, the golden Apple Watch is more important.

[fny]

I'm going to take a stab at this in the next few weeks, and I'll let you know if I come up with anything.

Anyway, here's a thought that I'd like more opinions on:

I don't believe modals should exist on mobile anyway. Given the screen real estate, it's much more practical for the modal to use the entire space of the screen and appear to behave like a page. We ended up hacking this in as a quick fix for the iOS cases and it looks and feels great:

Now the only issue becomes fixing Remodal for iPads...

[ghost]

I had the same issue. I changed remodal.css with below one and removed the remodal-template.css

html.remodal-is-locked,
body.remodal-is-locked {
overflow: hidden;
}
/* Anti FOUC */

.remodal,
[data-remodal-id] {
visibility: hidden;
}
/* Necessary styles of the overlay */

.remodal-overlay {
position: fixed;
z-index: 9999;
top: -5000px;
right: -5000px;
bottom: -5000px;
left: -5000px;
display: none;
}
/* Necessary styles of the wrapper */

.remodal-wrapper {
position: fixed;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
overflow: auto;
text-align: center;
-webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
display: inline-block;
height: 100%;
margin-left: -0.05em;
content: "";
}
/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
-webkit-transform: translateZ(0px);
}
/* Necessary styles of the modal dialog */

.remodal {
position: relative;
display: inline-block;
}
/* Anti-zoom. Font-size should be >= 16px. */

.remodal select,
.remodal textarea,
.remodal input,
.remodal select:focus,
.remodal textarea:focus,
.remodal input:focus {
font-size: 16px;
}
/* ==========================================================================
Remodal default theme
========================================================================== /
/ Default theme font */

.remodal,
.remodal * {
font-family: "Exo 2", sans-serif;
}
/* Background for effects */

.remodal-bg {
-webkit-transition: -webkit-filter 0.2s ease-out;
-moz-transition: -moz-filter 0.2s ease-out;
-o-transition: -o-filter 0.2s ease-out;
transition: filter 0.2s ease-out;
}

body.remodal-is-active .remodal-bg {
-webkit-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
}
/* Default theme styles of the overlay */

.remodal-overlay {
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
opacity: 0;
background: rgba(33, 36, 46, 0.95);
}

body.remodal-is-active .remodal-overlay {
opacity: 1;
}
/* Default theme styles of the modal dialog */

.remodal {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
min-height: 100%;
padding: 35px 150px;
-webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
-moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out;
-o-transition: -o-transform 0.2s ease-out, opacity 0.2s ease-out;
transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-webkit-transform: scale(0.95);
-moz-transform: scale(0.95);
-ms-transform: scale(0.95);
-o-transform: scale(0.95);
transform: scale(0.95);
opacity: 0;
color: #182a3c;
background: white;
background-clip: padding-box;
}

body.remodal-is-active .remodal {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}
/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
vertical-align: middle;
}

/* Close button */

.remodal-close {
position: absolute;
top: 0;
left: 0;

display: block;
overflow: visible;

width: 35px;
height: 35px;
margin: 0;
padding: 0;

cursor: pointer;
-webkit-transition: color 0.2s;
transition: color 0.2s;
text-decoration: none;

color: #95979c;
border: 0;
outline: 0;
background: transparent;
}

.remodal-close:hover {
color: #2b2e38;
}

.remodal-close:before {
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
font-size: 25px;
line-height: 35px;

position: absolute;
top: 0;
left: 0;

display: block;

width: 35px;

content: "\00d7";
text-align: center;
}
/* Dialog buttons */

.remodal-submit,
.remodal-cancel {
font-size: 10pt;
display: inline-block;
width: 120px;
margin: 0 0 5px 0;
padding: 9px 0;
cursor: pointer;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
text-align: center;
text-decoration: none;
-webkit-border-radius: 6px;
border-radius: 6px;
background-clip: padding-box;
}

.remodal-submit {
color: #4a77d4;
border: 2px solid #4a77d4;
background: #f4f4f4;
}

.remodal-submit:hover,
.remodal-submit:active {
color: #f4f4f4;
background: #4a77d4;
}

.remodal-cancel {
color: #c0392b;
border: 2px solid #c0392b;
background: #f4f4f4;
}

.remodal-cancel:hover,
.remodal-cancel:active {
color: #f4f4f4;
background: #c0392b;
}

input[type="modal"] {
width: 100%;
margin-bottom: 10px;
background: rgba(0, 0, 0, 0);
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100, 100, 100, 0.2), 0 1px 1px rgba(255, 255, 255, 0.2);
-webkit-transition: box-shadow .5s ease;
-moz-transition: box-shadow .5s ease;
-o-transition: box-shadow .5s ease;
-ms-transition: box-shadow .5s ease;
transition: box-shadow .5s ease;
}
/* Media queries
========================================================================== */

@media only screen and (min-width: 40.063em)
/* min-width 641px */

{
.remodal {
max-width: 700px;
min-height: 400px;
margin: 20px auto;
-webkit-border-radius: 6px;
border-radius: 6px;
}
}
/* IE8
========================================================================== */

.lt-ie9 .remodal-overlay {
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#F021242E, endColorstr=#F021242E);
}

.lt-ie9 .remodal {
width: 700px;
min-height: 400px;
margin: 20px auto;
}

.lt-ie9 .remodal-close:after {
margin: auto;
text-align: center;
}

.lt-ie9 .remodal-close:hover,
.lt-ie9 .remodal-close:active {
background: transparent;
}

.lt-ie9 .remodal-close:hover.remodal-close:after,
.lt-ie9 .remodal-close:active.remodal-close:after {
color: #3e5368;
}

[junaidbhura]

+1 Same issue here. @canercak Can you tell us what exactly you changed to fix the issue?

[jmkenz]

I've experienced this issue as well with 'offcanvas panels' that slide out from the side of the page. Those panels are typically position:fixed. I use them for search filters. Since they contain form elements, I cannot use position:fixed. So I used position: absolute instead and rely on JavaScript to position it to the edge of the viewport so that it can appear to be sliding out from the side.

[robarwebservices]

How are you guys fixing this issue? It is even worse with a textarea.

You click in the textarea, type a few letters, and then tap/touch the textarea, and the remodal-overlay becomes hidden (almost like it has 0 opacity) e.g. all I can see is the overlay, but i know the fields are there because I can see a cursor blinking, and because I know where the submit button is I can tap there and it submits. I just can't see it.

This makes remodal un-usable (if using forms) on iphones imo.

For now I am using a solution I posted here:

#148

But it isn't without its problems, so still looking for a better solution

[damienmcd]

I have implemented the solution posted by @robarwebservices on issue #148 but I'm still experiencing the same issue when using a drop-down select.
The issue is not happening for a text input but I'm still getting the disappearing modal when closing the drop-down.

Is there any known solution for this?

[rijosh]

This is because of modal position fixed, we can fix this issue using
body.modal-open{position: fixed;}
detect the device and right this style for that ios device only. for eg

<script type="text/javascript"> if( navigator.userAgent.match(/iPhone|iPad|iPod/i) ) { $('html').addClass('ios-device'); } </script> <style type="text/css"> .ios-device body.modal-open{position: fixed;} </style>