From 0d3bc05c91376b980e0ee3d734e0310be5912fb7 Mon Sep 17 00:00:00 2001
From: Mark Allen Ramirez <markallenramirez@gmail.com>
Date: Fri, 19 Jan 2024 15:54:30 +0800
Subject: [PATCH] fix

---
 .../ToolbarCustomization/Angular/app/app.component.css    | 4 ++++
 .../Demos/DataGrid/ToolbarCustomization/React/styles.css  | 8 ++++++--
 .../DataGrid/ToolbarCustomization/ReactJs/styles.css      | 8 ++++++--
 JSDemos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue   | 8 ++++++--
 .../Demos/DataGrid/ToolbarCustomization/jQuery/styles.css | 4 ++++
 .../Content/DemosStyles/DataGrid/ToolbarCustomization.css | 4 ++++
 .../css/DemosStyles/DataGrid/ToolbarCustomization.css     | 4 ++++
 7 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/JSDemos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.css b/JSDemos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.css
index c28570d509b..228ee1c66f2 100644
--- a/JSDemos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.css
+++ b/JSDemos/Demos/DataGrid/ToolbarCustomization/Angular/app/app.component.css
@@ -10,3 +10,7 @@
   font-size: 18px;
   font-weight: 500;
 }
+
+::ng-deep #gridContainer .dx-toolbar-items-container {
+  min-height: 44px;
+}
diff --git a/JSDemos/Demos/DataGrid/ToolbarCustomization/React/styles.css b/JSDemos/Demos/DataGrid/ToolbarCustomization/React/styles.css
index 1856e44ab21..c2fd97e20ea 100644
--- a/JSDemos/Demos/DataGrid/ToolbarCustomization/React/styles.css
+++ b/JSDemos/Demos/DataGrid/ToolbarCustomization/React/styles.css
@@ -1,4 +1,4 @@
-.informer {
+#gridContainer .informer {
   display: grid;
   width: 120px;
   grid-template-columns: 100%;
@@ -6,7 +6,11 @@
   text-align: center;
 }
 
-.count {
+#gridContainer .count {
   font-size: 18px;
   font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+  min-height: 44px;
+}
diff --git a/JSDemos/Demos/DataGrid/ToolbarCustomization/ReactJs/styles.css b/JSDemos/Demos/DataGrid/ToolbarCustomization/ReactJs/styles.css
index 1856e44ab21..c2fd97e20ea 100644
--- a/JSDemos/Demos/DataGrid/ToolbarCustomization/ReactJs/styles.css
+++ b/JSDemos/Demos/DataGrid/ToolbarCustomization/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.informer {
+#gridContainer .informer {
   display: grid;
   width: 120px;
   grid-template-columns: 100%;
@@ -6,7 +6,11 @@
   text-align: center;
 }
 
-.count {
+#gridContainer .count {
   font-size: 18px;
   font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+  min-height: 44px;
+}
diff --git a/JSDemos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue b/JSDemos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue
index 8e45879c1f9..e470cc22c03 100644
--- a/JSDemos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue
+++ b/JSDemos/Demos/DataGrid/ToolbarCustomization/Vue/App.vue
@@ -131,7 +131,7 @@ const refreshDataGrid = () => {
 </script>
 <style scoped>
 
-.informer {
+#gridContainer .informer {
   display: grid;
   width: 120px;
   grid-template-columns: 100%;
@@ -139,8 +139,12 @@ const refreshDataGrid = () => {
   text-align: center;
 }
 
-.count {
+#gridContainer .count {
   font-size: 18px;
   font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+  min-height: 44px;
+}
 </style>
diff --git a/JSDemos/Demos/DataGrid/ToolbarCustomization/jQuery/styles.css b/JSDemos/Demos/DataGrid/ToolbarCustomization/jQuery/styles.css
index aeead376316..c2fd97e20ea 100644
--- a/JSDemos/Demos/DataGrid/ToolbarCustomization/jQuery/styles.css
+++ b/JSDemos/Demos/DataGrid/ToolbarCustomization/jQuery/styles.css
@@ -10,3 +10,7 @@
   font-size: 18px;
   font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+  min-height: 44px;
+}
diff --git a/MVCDemos/Content/DemosStyles/DataGrid/ToolbarCustomization.css b/MVCDemos/Content/DemosStyles/DataGrid/ToolbarCustomization.css
index db231257f64..5f7dbd067b3 100644
--- a/MVCDemos/Content/DemosStyles/DataGrid/ToolbarCustomization.css
+++ b/MVCDemos/Content/DemosStyles/DataGrid/ToolbarCustomization.css
@@ -10,3 +10,7 @@
     font-size: 18px;
     font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+    min-height: 44px;
+}
diff --git a/NetCoreDemos/wwwroot/css/DemosStyles/DataGrid/ToolbarCustomization.css b/NetCoreDemos/wwwroot/css/DemosStyles/DataGrid/ToolbarCustomization.css
index db231257f64..5f7dbd067b3 100644
--- a/NetCoreDemos/wwwroot/css/DemosStyles/DataGrid/ToolbarCustomization.css
+++ b/NetCoreDemos/wwwroot/css/DemosStyles/DataGrid/ToolbarCustomization.css
@@ -10,3 +10,7 @@
     font-size: 18px;
     font-weight: 500;
 }
+
+#gridContainer .dx-toolbar-items-container {
+    min-height: 44px;
+}