From cb2f735d140760f67852edb47122c4448aa89eca Mon Sep 17 00:00:00 2001 From: Stefan Gabos Date: Mon, 3 Jul 2017 19:15:35 +0300 Subject: [PATCH] Fix for scrolling on iPhone; see #9 --- dist/css/default/zebra_dialog.css | 1 + dist/css/default/zebra_dialog.min.css | 2 +- dist/css/flat/zebra_dialog.css | 1 + dist/css/flat/zebra_dialog.min.css | 2 +- src/css/default/zebra_dialog.scss | 1 + src/css/flat/zebra_dialog.scss | 1 + 6 files changed, 6 insertions(+), 2 deletions(-) diff --git a/dist/css/default/zebra_dialog.css b/dist/css/default/zebra_dialog.css index 12a3d86..e943741 100644 --- a/dist/css/default/zebra_dialog.css +++ b/dist/css/default/zebra_dialog.css @@ -167,6 +167,7 @@ border-bottom-width: 2px; border-bottom-style: groove; overflow: auto; + -webkit-overflow-scrolling: touch; } .ZebraDialog .ZebraDialog_NoTitle .ZebraDialog_Body { diff --git a/dist/css/default/zebra_dialog.min.css b/dist/css/default/zebra_dialog.min.css index d31376d..a30edc9 100644 --- a/dist/css/default/zebra_dialog.min.css +++ b/dist/css/default/zebra_dialog.min.css @@ -1 +1 @@ -.ZebraDialog *,.ZebraDialog *:after,.ZebraDialog *:before{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.ZebraDialog{width:350px;z-index:1001;max-width:100%}@media (max-width: 574px){.ZebraDialog{width:100%}}.ZebraDialog,.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_Body,.ZebraDialog .ZebraDialog_Buttons a{margin:0;padding:0;font-family:Helvetica, Tahoma, Arial, sans-serif;font-size:14px;text-align:left}.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_BodyOuter,.ZebraDialog .ZebraDialog_ButtonsOuter{border-color:#13252F;border-width:7px}.ZebraDialog .ZebraDialog_Title{font-size:16px;font-weight:bold;color:#F6F5F5;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background:#444444;padding:12px 15px;line-height:1;vertical-align:middle}.ZebraDialog .ZebraDialog_BodyOuter{background:#E7EDEF}.ZebraDialog .ZebraDialog_Body{color:#44484A;padding:20px;border-top-color:#000;border-bottom-color:#FFF}.ZebraDialog .ZebraDialog_ButtonsOuter{background:#E7EDEF;padding:10px 5px 10px 10px}.ZebraDialog .ZebraDialog_Buttons:before,.ZebraDialog .ZebraDialog_Buttons:after{content:"\0020";display:block;height:0;visibility:hidden;font-size:0}.ZebraDialog .ZebraDialog_Buttons:after{clear:both}.ZebraDialog .ZebraDialog_Buttons{*zoom:1}.ZebraDialog .ZebraDialog_Buttons a{font-weight:bold;color:#FFF;text-shadow:1px 0px 2px #222;padding:10px 15px}.ZebraDialog .ZebraDialog_Buttons a:hover{background:#224467;color:#FFF}.ZebraDialog a.ZebraDialog_Close{position:absolute;right:6px;top:0px;margin-top:6px;margin-right:6px;text-decoration:none;font-family:arial, sans-serif;font-weight:bold;font-size:21px;color:#666}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close{color:#E7EDEF}.ZebraDialogOverlay{background:#666;z-index:1000;width:100%;height:100%}.ZebraDialog{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}.ZebraDialog .ZebraDialog_Title{border-left-style:solid;border-top-style:solid;border-right-style:solid;-webkit-border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0}.ZebraDialog .ZebraDialog_BodyOuter{border-left-style:solid;border-right-style:solid}.ZebraDialog .ZebraDialog_NoTitle{border-top-style:solid;-webkit-border-top-left-radius:10px;-moz-border-top-left-radius:10px;border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-top-right-radius:10px;border-top-right-radius:10px}.ZebraDialog .ZebraDialog_NoButtons{border-bottom-style:solid;-webkit-border-bottom-left-radius:10px;-moz-border-bottom-left-radius:10px;border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-bottom-right-radius:10px;border-bottom-right-radius:10px}.ZebraDialog .ZebraDialog_Body{border-top-width:1px;border-top-style:solid;border-bottom-width:2px;border-bottom-style:groove;overflow:auto}.ZebraDialog .ZebraDialog_NoTitle .ZebraDialog_Body{border-top:none}.ZebraDialog .ZebraDialog_NoButtons .ZebraDialog_Body{border-bottom:none}.ZebraDialog .ZebraDialog_Icon{background-repeat:no-repeat;background-position:20px 20px;padding-left:88px;min-height:48px;_height:85px}.ZebraDialog .ZebraDialog_Confirmation{background-image:url("confirmation.png")}.ZebraDialog .ZebraDialog_Error{background-image:url("error.png")}.ZebraDialog .ZebraDialog_Information{background-image:url("information.png")}.ZebraDialog .ZebraDialog_Question{background-image:url("question.png")}.ZebraDialog .ZebraDialog_Warning{background-image:url("warning.png")}.ZebraDialog .ZebraDialog_ButtonsOuter{border-left-style:solid;border-right-style:solid;border-bottom-style:solid;-webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px}.ZebraDialog .ZebraDialog_Buttons a{white-space:nowrap;text-align:center;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.25);display:inline-block;margin-right:5px;min-width:60px;float:right;_width:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background-color:#006DCC;*background-color:#0044CC;background-image:-moz-linear-gradient(top, #08c, #04c);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));background-image:-webkit-linear-gradient(top, #08c, #04c);background-image:-o-linear-gradient(top, #08c, #04c);background-image:linear-gradient(to bottom, #08c, #04c);background-repeat:repeat-x;border-color:#0044CC #0044CC #002A80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.ZebraDialog .ZebraDialog_Buttons_Centered .ZebraDialog_Buttons{display:table;margin:0 auto;text-align:center}.ZebraDialog .ZebraDialog_Buttons_Centered a{zoom:1;*display:inline}.ZebraDialog .ZebraDialog_Preloader{height:32px;background:url("preloader.gif") no-repeat center center} +.ZebraDialog *,.ZebraDialog *:after,.ZebraDialog *:before{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.ZebraDialog{width:350px;z-index:1001;max-width:100%}@media (max-width: 574px){.ZebraDialog{width:100%}}.ZebraDialog,.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_Body,.ZebraDialog .ZebraDialog_Buttons a{margin:0;padding:0;font-family:Helvetica, Tahoma, Arial, sans-serif;font-size:14px;text-align:left}.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_BodyOuter,.ZebraDialog .ZebraDialog_ButtonsOuter{border-color:#13252F;border-width:7px}.ZebraDialog .ZebraDialog_Title{font-size:16px;font-weight:bold;color:#F6F5F5;text-shadow:0 -1px 0 rgba(0,0,0,0.25);background:#444444;padding:12px 15px;line-height:1;vertical-align:middle}.ZebraDialog .ZebraDialog_BodyOuter{background:#E7EDEF}.ZebraDialog .ZebraDialog_Body{color:#44484A;padding:20px;border-top-color:#000;border-bottom-color:#FFF}.ZebraDialog .ZebraDialog_ButtonsOuter{background:#E7EDEF;padding:10px 5px 10px 10px}.ZebraDialog .ZebraDialog_Buttons:before,.ZebraDialog .ZebraDialog_Buttons:after{content:"\0020";display:block;height:0;visibility:hidden;font-size:0}.ZebraDialog .ZebraDialog_Buttons:after{clear:both}.ZebraDialog .ZebraDialog_Buttons{*zoom:1}.ZebraDialog .ZebraDialog_Buttons a{font-weight:bold;color:#FFF;text-shadow:1px 0px 2px #222;padding:10px 15px}.ZebraDialog .ZebraDialog_Buttons a:hover{background:#224467;color:#FFF}.ZebraDialog a.ZebraDialog_Close{position:absolute;right:6px;top:0px;margin-top:6px;margin-right:6px;text-decoration:none;font-family:arial, sans-serif;font-weight:bold;font-size:21px;color:#666}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close{color:#E7EDEF}.ZebraDialogOverlay{background:#666;z-index:1000;width:100%;height:100%}.ZebraDialog{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px}.ZebraDialog .ZebraDialog_Title{border-left-style:solid;border-top-style:solid;border-right-style:solid;-webkit-border-radius:10px 10px 0 0;-moz-border-radius:10px 10px 0 0;border-radius:10px 10px 0 0}.ZebraDialog .ZebraDialog_BodyOuter{border-left-style:solid;border-right-style:solid}.ZebraDialog .ZebraDialog_NoTitle{border-top-style:solid;-webkit-border-top-left-radius:10px;-moz-border-top-left-radius:10px;border-top-left-radius:10px;-webkit-border-top-right-radius:10px;-moz-border-top-right-radius:10px;border-top-right-radius:10px}.ZebraDialog .ZebraDialog_NoButtons{border-bottom-style:solid;-webkit-border-bottom-left-radius:10px;-moz-border-bottom-left-radius:10px;border-bottom-left-radius:10px;-webkit-border-bottom-right-radius:10px;-moz-border-bottom-right-radius:10px;border-bottom-right-radius:10px}.ZebraDialog .ZebraDialog_Body{border-top-width:1px;border-top-style:solid;border-bottom-width:2px;border-bottom-style:groove;overflow:auto;-webkit-overflow-scrolling:touch}.ZebraDialog .ZebraDialog_NoTitle .ZebraDialog_Body{border-top:none}.ZebraDialog .ZebraDialog_NoButtons .ZebraDialog_Body{border-bottom:none}.ZebraDialog .ZebraDialog_Icon{background-repeat:no-repeat;background-position:20px 20px;padding-left:88px;min-height:48px;_height:85px}.ZebraDialog .ZebraDialog_Confirmation{background-image:url("confirmation.png")}.ZebraDialog .ZebraDialog_Error{background-image:url("error.png")}.ZebraDialog .ZebraDialog_Information{background-image:url("information.png")}.ZebraDialog .ZebraDialog_Question{background-image:url("question.png")}.ZebraDialog .ZebraDialog_Warning{background-image:url("warning.png")}.ZebraDialog .ZebraDialog_ButtonsOuter{border-left-style:solid;border-right-style:solid;border-bottom-style:solid;-webkit-border-radius:0 0 10px 10px;-moz-border-radius:0 0 10px 10px;border-radius:0 0 10px 10px}.ZebraDialog .ZebraDialog_Buttons a{white-space:nowrap;text-align:center;text-decoration:none;text-shadow:0 -1px 0 rgba(0,0,0,0.25);display:inline-block;margin-right:5px;min-width:60px;float:right;_width:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;background-color:#006DCC;*background-color:#0044CC;background-image:-moz-linear-gradient(top, #08c, #04c);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));background-image:-webkit-linear-gradient(top, #08c, #04c);background-image:-o-linear-gradient(top, #08c, #04c);background-image:linear-gradient(to bottom, #08c, #04c);background-repeat:repeat-x;border-color:#0044CC #0044CC #002A80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.ZebraDialog .ZebraDialog_Buttons_Centered .ZebraDialog_Buttons{display:table;margin:0 auto;text-align:center}.ZebraDialog .ZebraDialog_Buttons_Centered a{zoom:1;*display:inline}.ZebraDialog .ZebraDialog_Preloader{height:32px;background:url("preloader.gif") no-repeat center center} diff --git a/dist/css/flat/zebra_dialog.css b/dist/css/flat/zebra_dialog.css index 21d7556..b95f2cc 100644 --- a/dist/css/flat/zebra_dialog.css +++ b/dist/css/flat/zebra_dialog.css @@ -116,6 +116,7 @@ ---------------------------------------------------------------------------------------------------------------------*/ .ZebraDialog .ZebraDialog_Body { overflow: auto; + -webkit-overflow-scrolling: touch; } .ZebraDialog .ZebraDialog_Icon { diff --git a/dist/css/flat/zebra_dialog.min.css b/dist/css/flat/zebra_dialog.min.css index b4e4fce..f901c73 100644 --- a/dist/css/flat/zebra_dialog.min.css +++ b/dist/css/flat/zebra_dialog.min.css @@ -1 +1 @@ -.ZebraDialog *,.ZebraDialog *:after,.ZebraDialog *:before{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.ZebraDialog{width:450px;z-index:1001;border:1px solid #DEDEDE;max-width:100%}@media (max-width: 574px){.ZebraDialog{width:100%}}.ZebraDialog,.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_Body,.ZebraDialog .ZebraDialog_Buttons a{margin:0;padding:0;font-family:Helvetica, Tahoma, Arial, sans-serif;font-size:14px;text-align:left;line-height:1.4}.ZebraDialog .ZebraDialog_Title{font-size:16px;font-weight:bold;color:#000;background:#FFF;padding:12px 15px;vertical-align:middle;border-bottom:1px solid #F0F0F0}.ZebraDialog .ZebraDialog_BodyOuter{background:#FFF}.ZebraDialog .ZebraDialog_Body{color:#44484A;padding:40px}.ZebraDialog .ZebraDialog_ButtonsOuter{background:#FFF;padding:10px 5px 10px 10px}.ZebraDialog .ZebraDialog_Buttons:before,.ZebraDialog .ZebraDialog_Buttons:after{content:"\0020";display:block;height:0;visibility:hidden;font-size:0}.ZebraDialog .ZebraDialog_Buttons:after{clear:both}.ZebraDialog .ZebraDialog_Buttons{*zoom:1}.ZebraDialog .ZebraDialog_Buttons a{font-weight:bold;color:#FFF;padding:10px 15px}.ZebraDialog .ZebraDialog_Buttons a:hover{background:#224467;color:#FFF}.ZebraDialog a.ZebraDialog_Close{position:absolute;right:6px;top:0px;text-decoration:none;font-family:arial, sans-serif;font-weight:bold;font-size:21px;color:#444}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close{color:#888}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close:hover{color:#000}.ZebraDialogOverlay{background:#666;z-index:1000;width:100%;height:100%}.ZebraDialog .ZebraDialog_Body{overflow:auto}.ZebraDialog .ZebraDialog_Icon{background-repeat:no-repeat;background-position:30px 40px;padding-left:124px;min-height:64px;_height:64px}.ZebraDialog .ZebraDialog_Confirmation{background-image:url("confirmation.png")}.ZebraDialog .ZebraDialog_Error{background-image:url("error.png")}.ZebraDialog .ZebraDialog_Information{background-image:url("information.png")}.ZebraDialog .ZebraDialog_Question{background-image:url("question.png")}.ZebraDialog .ZebraDialog_Warning{background-image:url("warning.png")}.ZebraDialog .ZebraDialog_Buttons a{white-space:nowrap;text-align:center;text-decoration:none;display:inline-block;margin-right:5px;min-width:60px;float:right;_width:60px;background:#516270}.ZebraDialog .ZebraDialog_Buttons_Centered .ZebraDialog_Buttons{display:table;margin:0 auto;text-align:center}.ZebraDialog .ZebraDialog_Buttons_Centered a{zoom:1;*display:inline}.ZebraDialog .ZebraDialog_Preloader{height:32px;background:url("preloader.gif") no-repeat center center} +.ZebraDialog *,.ZebraDialog *:after,.ZebraDialog *:before{-moz-box-sizing:content-box !important;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.ZebraDialog{width:450px;z-index:1001;border:1px solid #DEDEDE;max-width:100%}@media (max-width: 574px){.ZebraDialog{width:100%}}.ZebraDialog,.ZebraDialog .ZebraDialog_Title,.ZebraDialog .ZebraDialog_Body,.ZebraDialog .ZebraDialog_Buttons a{margin:0;padding:0;font-family:Helvetica, Tahoma, Arial, sans-serif;font-size:14px;text-align:left;line-height:1.4}.ZebraDialog .ZebraDialog_Title{font-size:16px;font-weight:bold;color:#000;background:#FFF;padding:12px 15px;vertical-align:middle;border-bottom:1px solid #F0F0F0}.ZebraDialog .ZebraDialog_BodyOuter{background:#FFF}.ZebraDialog .ZebraDialog_Body{color:#44484A;padding:40px}.ZebraDialog .ZebraDialog_ButtonsOuter{background:#FFF;padding:10px 5px 10px 10px}.ZebraDialog .ZebraDialog_Buttons:before,.ZebraDialog .ZebraDialog_Buttons:after{content:"\0020";display:block;height:0;visibility:hidden;font-size:0}.ZebraDialog .ZebraDialog_Buttons:after{clear:both}.ZebraDialog .ZebraDialog_Buttons{*zoom:1}.ZebraDialog .ZebraDialog_Buttons a{font-weight:bold;color:#FFF;padding:10px 15px}.ZebraDialog .ZebraDialog_Buttons a:hover{background:#224467;color:#FFF}.ZebraDialog a.ZebraDialog_Close{position:absolute;right:6px;top:0px;text-decoration:none;font-family:arial, sans-serif;font-weight:bold;font-size:21px;color:#444}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close{color:#888}.ZebraDialog .ZebraDialog_Title a.ZebraDialog_Close:hover{color:#000}.ZebraDialogOverlay{background:#666;z-index:1000;width:100%;height:100%}.ZebraDialog .ZebraDialog_Body{overflow:auto;-webkit-overflow-scrolling:touch}.ZebraDialog .ZebraDialog_Icon{background-repeat:no-repeat;background-position:30px 40px;padding-left:124px;min-height:64px;_height:64px}.ZebraDialog .ZebraDialog_Confirmation{background-image:url("confirmation.png")}.ZebraDialog .ZebraDialog_Error{background-image:url("error.png")}.ZebraDialog .ZebraDialog_Information{background-image:url("information.png")}.ZebraDialog .ZebraDialog_Question{background-image:url("question.png")}.ZebraDialog .ZebraDialog_Warning{background-image:url("warning.png")}.ZebraDialog .ZebraDialog_Buttons a{white-space:nowrap;text-align:center;text-decoration:none;display:inline-block;margin-right:5px;min-width:60px;float:right;_width:60px;background:#516270}.ZebraDialog .ZebraDialog_Buttons_Centered .ZebraDialog_Buttons{display:table;margin:0 auto;text-align:center}.ZebraDialog .ZebraDialog_Buttons_Centered a{zoom:1;*display:inline}.ZebraDialog .ZebraDialog_Preloader{height:32px;background:url("preloader.gif") no-repeat center center} diff --git a/src/css/default/zebra_dialog.scss b/src/css/default/zebra_dialog.scss index 1be9537..c4daa9e 100644 --- a/src/css/default/zebra_dialog.scss +++ b/src/css/default/zebra_dialog.scss @@ -153,6 +153,7 @@ border-bottom-width: 2px; border-bottom-style: groove; overflow: auto; + -webkit-overflow-scrolling: touch; } .ZebraDialog .ZebraDialog_NoTitle .ZebraDialog_Body { diff --git a/src/css/flat/zebra_dialog.scss b/src/css/flat/zebra_dialog.scss index 685b0f5..062b914 100644 --- a/src/css/flat/zebra_dialog.scss +++ b/src/css/flat/zebra_dialog.scss @@ -101,6 +101,7 @@ ---------------------------------------------------------------------------------------------------------------------*/ .ZebraDialog .ZebraDialog_Body { overflow: auto; + -webkit-overflow-scrolling: touch; } .ZebraDialog .ZebraDialog_Icon {