Drawer,List demos - Remove absolute positioned container (#3036)

* fix drawer demo * fix list demo * update etalon * fix react&vue
DevExpress · Nov 24, 2023 · 857e40e · 857e40e
1 parent 7834cdc
commit 857e40e
Show file tree

Hide file tree

Showing 15 changed files with 37 additions and 65 deletions.
diff --git a/JSDemos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css b/JSDemos/Demos/Drawer/LeftOrRightPosition/Angular/app/app.component.css
@@ -22,10 +22,6 @@
   padding-top: 12px;
 }
 
-::ng-deep .dx-drawer-expand.dx-drawer-right .panel-list {
-  float: right;
-}
-
 ::ng-deep .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);

diff --git a/JSDemos/Demos/Drawer/LeftOrRightPosition/React/styles.css b/JSDemos/Demos/Drawer/LeftOrRightPosition/React/styles.css
@@ -22,10 +22,6 @@
   padding-top: 12px;
 }
 
-.dx-drawer-expand.dx-drawer-right .panel-list {
-  float: right;
-}
-
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);

diff --git a/JSDemos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css b/JSDemos/Demos/Drawer/LeftOrRightPosition/ReactJs/styles.css
@@ -22,10 +22,6 @@
   padding-top: 12px;
 }
 
-.dx-drawer-expand.dx-drawer-right .panel-list {
-  float: right;
-}
-
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);

diff --git a/JSDemos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue b/JSDemos/Demos/Drawer/LeftOrRightPosition/Vue/App.vue
@@ -107,10 +107,6 @@ const toolbarContent = [{
       padding-top: 12px;
     }
 
-    .dx-drawer-expand.dx-drawer-right .panel-list {
-      float: right;
-    }
-
     .options {
       padding: 20px;
       background-color: rgba(191, 191, 191, 0.15);

diff --git a/JSDemos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css b/JSDemos/Demos/Drawer/LeftOrRightPosition/jQuery/styles.css
@@ -22,10 +22,6 @@
   padding-top: 12px;
 }
 
-.dx-drawer-expand.dx-drawer-right .panel-list {
-  float: right;
-}
-
 .options {
   padding: 20px;
   background-color: rgba(191, 191, 191, 0.15);

diff --git a/JSDemos/Demos/List/ItemTemplate/Angular/app/app.component.css b/JSDemos/Demos/List/ItemTemplate/Angular/app/app.component.css
@@ -1,9 +1,9 @@
+::ng-deep .demo-container {
+  height: 450px;
+}
+
 ::ng-deep .list-container {
-  min-height: 440px;
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 
 ::ng-deep .product {

diff --git a/JSDemos/Demos/List/ItemTemplate/React/styles.css b/JSDemos/Demos/List/ItemTemplate/React/styles.css
@@ -1,9 +1,9 @@
+#app {
+  height: 450px;
+}
+
 .list-container {
-  min-height: 440px;
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 
 .product {

diff --git a/JSDemos/Demos/List/ItemTemplate/ReactJs/styles.css b/JSDemos/Demos/List/ItemTemplate/ReactJs/styles.css
@@ -1,9 +1,9 @@
+#app {
+  height: 450px;
+}
+
 .list-container {
-  min-height: 440px;
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 
 .product {

diff --git a/JSDemos/Demos/List/ItemTemplate/Vue/App.vue b/JSDemos/Demos/List/ItemTemplate/Vue/App.vue
@@ -18,11 +18,11 @@ import { products } from './data.js';
 const dataSource = products;
 </script>
 <style>
+#app {
+  height: 450px;
+}
+
 .list-container {
-  min-height: 440px;
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 </style>
diff --git a/JSDemos/Demos/List/ItemTemplate/jQuery/styles.css b/JSDemos/Demos/List/ItemTemplate/jQuery/styles.css
@@ -1,9 +1,9 @@
+.demo-container {
+  height: 450px;
+}
+
 .list-container {
-  min-height: 440px;
-  height: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  height: 100%;
 }
 
 .product {

diff --git a/MVCDemos/Content/DemosStyles/Drawer/LeftOrRightPosition.css b/MVCDemos/Content/DemosStyles/Drawer/LeftOrRightPosition.css
@@ -22,10 +22,6 @@
     padding-top: 12px;
 }
 
-.dx-drawer-expand.dx-drawer-right .panel-list {
-    float: right;
-}
-
 .options {
     padding: 20px;
     background-color: rgba(191, 191, 191, .15);

diff --git a/MVCDemos/Content/DemosStyles/List/ItemTemplate.css b/MVCDemos/Content/DemosStyles/List/ItemTemplate.css
@@ -1,9 +1,9 @@
-.list-container {
-    min-height: 440px;
-    height: auto;
-    position: absolute;
-    top: 0; 
-    bottom: 0;
+.demo-container {
+    height: 450px;
+}
+
+.list-container {
+    height: 100%;
 }
 
 .product {

diff --git a/NetCoreDemos/wwwroot/css/DemosStyles/Drawer/LeftOrRightPosition.css b/NetCoreDemos/wwwroot/css/DemosStyles/Drawer/LeftOrRightPosition.css
@@ -22,10 +22,6 @@
     padding-top: 12px;
 }
 
-.dx-drawer-expand.dx-drawer-right .panel-list {
-    float: right;
-}
-
 .options {
     padding: 20px;
     background-color: rgba(191, 191, 191, .15);

diff --git a/NetCoreDemos/wwwroot/css/DemosStyles/List/ItemTemplate.css b/NetCoreDemos/wwwroot/css/DemosStyles/List/ItemTemplate.css
@@ -1,9 +1,9 @@
-.list-container {
-    min-height: 440px;
-    height: auto;
-    position: absolute;
-    top: 0; 
-    bottom: 0;
+.demo-container {
+    height: 450px;
+}
+
+.list-container {
+    height: 100%;
 }
 
 .product {

diff --git a/testing/etalons/List-ItemTemplate.png b/testing/etalons/List-ItemTemplate.png