Added new kb article date-range-picker-vertical-input-alignment (#2192)

* Added new kb article date-range-picker-vertical-input-alignment * Update knowledge-base/date-range-picker-vertical-input-alignment.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/date-range-picker-vertical-input-alignment.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * chore(daterangepicker): update kb --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: Nadezhda Tacheva <Nadezhda.Tacheva@progress.com>
telerik · Aug 1, 2024 · f7511df · f7511df
1 parent 29a1c2a
commit f7511df
Showing 1 changed file with 66 additions and 0 deletions.
diff --git a/knowledge-base/daterangepicker-vertical-input-alignment.md b/knowledge-base/daterangepicker-vertical-input-alignment.md
@@ -0,0 +1,66 @@
+---
+title: Align DateRangePicker Inputs Vertically
+description: Learn how to modify the layout of the DateRangePicker in Blazor to display its inputs vertically using custom CSS.
+type: how-to
+page_title: How to Display DateRangePicker Inputs Vertically
+slug: daterangepicker-kb-vertical-input-alignment
+tags: datarangepicker, blazor, css, layout, vertical, align
+res_type: kb
+ticketid: 1656293
+---
+
+## Environment
+
+<table>
+    <tbody>
+        <tr>
+            <td>Product</td>
+            <td>DateRangePicker for Blazor</td>
+        </tr>
+    </tbody>
+</table>
+
+## Description
+
+This KB article answers the following questions:
+- How to change the layout of DateRangePicker inputs in Blazor, so they appear vertically oriented?
+- Can I display DateRangePicker inputs vertically in Blazor?
+- Is there a way to adjust the DateRangePicker so the inputs appear on two lines, one on top of each other?
+
+## Solution
+
+To align the inputs of the DateRangePicker vertically, apply custom CSS to adjust the component's layout. Follow these steps:
+
+1. Add a custom CSS class to the DateRangePicker through the `Class` parameter.
+2. Use the custom class to target the wrapping element of the DateRangePicker and apply the necessary styles.
+3. (Optional) Adjust the popup calendar orientation if needed.
+
+Here is an example implementation:
+
+```CSHTML
+<style>
+    .vertical-picker {
+        flex-direction: column;
+        align-items: baseline;
+        width: 140px;
+    }
+</style>
+
+<TelerikDateRangePicker @bind-StartValue="@StartValue"
+                        @bind-EndValue="@EndValue"
+                        Class="vertical-picker" 
+                        Orientation="CalendarOrientation.Vertical">
+</TelerikDateRangePicker>
+
+@code {
+    private DateTime? StartValue { get; set; } = DateTime.Today;
+    private DateTime? EndValue { get; set; } = DateTime.Today.AddDays(10);
+}
+```
+
+This CSS ensures that the labels and inputs of the DateRangePicker display one below the other. Adjust the styles as needed to fit your design requirements better. Additionally, consider [repositioning the labels so they appear on the side and not on top of the inputs]({%slug daterangepicker-kb-reposition-labels%}).
+
+## See Also
+
+- [Repositioning Labels in DateRangePicker](https://docs.telerik.com/blazor-ui/knowledge-base/daterangepicker-reposition-labels)
+- [DateRangePicker Overview](https://docs.telerik.com/blazor-ui/components/daterangepicker/overview)