global filters ui

framework/src/Volo.Abp.AspNetCore.Mvc.UI.Dashboards/Volo/Abp/AspNetCore/Mvc/UI/Dashboards/Components/Dashboard/Default.cshtml

@@ -12,23 +12,29 @@
 @{
 }
 
-<abp-row class="mb-4">
-    <form id="DashboardGlobalFiltersForm">
-        @foreach (var globalFilterConfiguration in Model.Dashboard.AvailableGlobalFilters)
+    <abp-row class="mb-4 align-items-center justify-content-between">
+        @if (Model.Dashboard.AvailableGlobalFilters.Any())
         {
-            var globalFilter = Model.GetGlobalFilter(globalFilterConfiguration.GlobalFilterName);
+            <abp-column size="_10">
+                <form id="DashboardGlobalFiltersForm">
+                    <abp-row>
+                        @foreach (var globalFilterConfiguration in Model.Dashboard.AvailableGlobalFilters)
+                        {
+                            var globalFilter = Model.GetGlobalFilter(globalFilterConfiguration.GlobalFilterName);
 
-            @await GlobalFilteRenderer.RenderAsync(Component, globalFilter.Name)
+                            @await GlobalFilteRenderer.RenderAsync(Component, globalFilter.Name)
 
+                        }
+                    </abp-row>
+                </form>
+            </abp-column>
+            <abp-column size="_2">
+                <div class="float-right">
+                    <abp-button button-type="Success" text="@L["Refresh"].Value" icon="refresh" id="GlobalRefreshButton" />
+                </div>
+            </abp-column>
         }
-        @if (Model.Dashboard.AvailableGlobalFilters.Any())
-        {
-        <div class="float-right">
-            <abp-button button-type="Success" text="@L["Refresh"].Value" id="GlobalRefreshButton" />
-        </div>
-        }
-    </form>
-</abp-row>
+    </abp-row>
 
 <abp-row>
     @foreach (var widgetConfiguration in Model.Dashboard.AvailableWidgets)

samples/DashboardDemo/src/DashboardDemo.Web/Pages/widgets/Filters/DateRangeGlobalFilterViewComponent.cshtml

@@ -5,7 +5,15 @@
 @{
 }
 <div id="DateRangeGlobalFilterContainer">
-    <input type="date" id="StartDate" name="StartDate"/>
-    <input type="date" id="EndDate" name="EndDate"/>
+    <div class="row">
+        <div class="col-md-6 mb-3">
+            <label for="DateFilterStartDateInput">@L["Start Date"].Value</label>
+            <input class="form-control" type="date" name="StartDate" id="DateFilterStartDateInput">
+        </div>
+        <div class="col-md-6 mb-3">
+            <label for="DateFilterEndDateInput">@L["End Date"].Value</label>
+            <input class="form-control" type="date" name="EndDate" id="EndDateStartDateInput">
+        </div>
+    </div>
 </div>