fix: angular scrollview

telerik · Dec 15, 2020 · 10d7916 · 10d7916
1 parent 6cb5752
commit 10d7916
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 18 deletions.
diff --git a/packages/default/scss/scrollview/_layout.scss b/packages/default/scss/scrollview/_layout.scss
@@ -1,7 +1,6 @@
 @include exports("scrollview/layout") {
 
-    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
-    kendo-scrollview.k-scrollview-wrap,
+    kendo-scrollview.k-scrollview,
     .k-widget.k-scrollview {
         border-width: $scrollview-border-width;
         border-style: solid;
@@ -47,7 +46,7 @@
         }
     }
 
-    kendo-scrollview.k-scrollview-wrap.k-scrollview-multidot .k-scrollview-pageable > .k-button,
+    kendo-scrollview.k-scrollview.k-scrollview-multidot .k-scrollview-pageable > .k-button,
     .k-widget.k-scrollview.k-scrollview-multidot .k-scrollview-nav > .k-link {
 
         &:nth-last-of-type(1),
@@ -69,9 +68,8 @@
         }
     }
 
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
+    kendo-scrollview.k-scrollview kendo-scrollview-pager,
     .k-scrollview-nav-wrap {
-
         padding: 0;
         margin: 0;
         position: absolute;
@@ -82,6 +80,16 @@
         text-align: center;
     }
 
+    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
+    kendo-scrollview.k-scrollview kendo-scrollview-pager {
+        pointer-events: none;
+    }
+
+    kendo-scrollview.k-scrollview-wrap .k-scrollview-nav,
+    kendo-scrollview.k-scrollview .k-scrollview-nav {
+        pointer-events: initial;
+    }
+
     .k-scrollview-pageable,
     .k-scrollview-nav {
         margin: 0;
@@ -172,14 +180,14 @@
 
 
     @supports (-webkit-user-select: none) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
+        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
         div.k-scrollview ul.k-scrollview-wrap li > * {
             pointer-events: auto;
         }
     }
 
     @supports (not (-webkit-user-select: none)) {
-        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
+        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
         div.k-scrollview ul.k-scrollview-wrap li > * {
             pointer-events: none;
         }

diff --git a/packages/default/scss/scrollview/_theme.scss b/packages/default/scss/scrollview/_theme.scss
@@ -1,7 +1,6 @@
 @include exports("scrollview/theme") {
 
-    // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
-    kendo-scrollview.k-scrollview-wrap,
+    kendo-scrollview.k-scrollview,
     div.k-scrollview {
         @extend .k-text-selection !optional;
         @include fill(

diff --git a/tests/visual/scrollview.html b/tests/visual/scrollview.html
@@ -274,8 +274,8 @@ <h5>Dark mode</h5>
 
         <!-- Kendo Angular Scrollview -->
         <!-- refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done -->
-        <kendo-scrollview class="k-widget k-scrollview-wrap k-scrollview-light k-scrollview-multidot" >
-            <ul class="k-scrollview">
+        <kendo-scrollview class="k-widget k-scrollview k-scrollview-light k-scrollview-multidot" >
+            <ul class="k-scrollview-wrap">
                 <li style="height: 300px; transform: translateX(-100%); width: 100%;">
                     <!-- template -->
                     <div style="width: 100%; height: 100%; background-color: rgba(51, 51, 51, 0.654);"></div>
@@ -302,7 +302,7 @@ <h5>Dark mode</h5>
                     <span class="k-icon k-i-arrowhead-e"></span>
                 </a>
                 <kendo-scrollview-pager>
-                    <ul class="k-scrollview-pageable">
+                    <ul class="k-scrollview-pageable k-scrollview-nav">
                         <li class="k-button"></li><!--
                         --><li class="k-button"></li><!--
                         --><li class="k-button"></li><!--
@@ -315,8 +315,8 @@ <h5>Dark mode</h5>
             </div>
         </kendo-scrollview>
 
-        <kendo-scrollview class="k-widget k-scrollview-wrap" >
-            <ul class="k-scrollview">
+        <kendo-scrollview class="k-widget k-scrollview" >
+            <ul class="k-scrollview-wrap">
                 <li style="height: 300px; transform: translateX(-100%); width: 100%;">
                     <!-- template -->
                     <div style="width: 100%; height: 100%; background-color: rgba(51, 51, 51, 0.654);"></div>
@@ -343,7 +343,7 @@ <h5>Dark mode</h5>
                     <span class="k-icon k-i-arrowhead-e"></span>
                 </a>
                 <kendo-scrollview-pager>
-                    <ul class="k-scrollview-pageable">
+                    <ul class="k-scrollview-pageable k-scrollview-nav">
                         <li class="k-button k-primary"></li><!--
                         --><li class="k-button"></li><!--
                         --><li class="k-button"></li>
@@ -353,8 +353,8 @@ <h5>Dark mode</h5>
         </kendo-scrollview>
 
 
-        <kendo-scrollview class="k-widget k-scrollview-wrap k-scrollview-dark">
-            <ul class="k-scrollview">
+        <kendo-scrollview class="k-widget k-scrollview k-scrollview-dark">
+            <ul class="k-scrollview-wrap">
                 <li style="height: 300px; transform: translateX(-100%); width: 100%;">
                     <!-- template -->
                     <div style="width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.503);"></div>
@@ -381,7 +381,7 @@ <h5>Dark mode</h5>
                     <span class="k-icon k-i-arrowhead-e"></span>
                 </a>
                 <kendo-scrollview-pager>
-                    <ul class="k-scrollview-pageable">
+                    <ul class="k-scrollview-pageable k-scrollview-nav">
                         <li class="k-button k-primary"></li><!--
                         --><li class="k-button"></li><!--
                         --><li class="k-button"></li>