You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: knowledge-base/daterangepicker-css-customization.md
+7-6Lines changed: 7 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -24,19 +24,19 @@ res_type: kb
24
24
25
25
This KB article answers the following questions:
26
26
27
-
* How to customize the Blazor DateRangePicker styling?
28
-
* How to make weekends disabled in the DateRangePicker component?
27
+
* How to customize the styling of the Blazor DateRangePicker?
28
+
* How to disable the weekends in the DateRangePicker component?
29
29
* How to reduce the width of the two DateInputs?
30
30
* How to prevent horizontal expansion of the DateRangePicker?
31
31
* How to hide the Start and End labels of the DateRangePicker?
32
32
* How to make the DateRangePicker more compact?
33
33
34
34
## Solution
35
35
36
-
1. Use a `Class` parameter and custom CSS to override our theme and hide the labels (**.k-floating-label**). Note that If it is used **display:none**, it violates the accessibility compliance. Instead, use **font-size:0** for example.
37
-
2. Override the default width of **10em** of the two `DateInputs` (**.k-dateinput**).
38
-
3. Change the display of the element to inline with **display:inline-flex** to prevent the horizontal expansion of the component.
39
-
4. Set the **padding-top: 0** of the **.k-floating-label-container** to remove reserved space and make the `DateRangePicker` more compact.
36
+
1. Use a `Class` parameter and custom CSS to override the theme and hide the labels (`.k-floating-label`). Note that using `display:none`, violates the accessibility compliance. Instead, use `font-size: 0`, for example.
37
+
2. Override the default width of `10em` of the two DateInputs (`.k-dateinput`).
38
+
3. Change the display of the element to inline by using `display:inline-flex` to prevent the horizontal expansion of the component.
39
+
4. Set the `padding-top: 0` of the `.k-floating-label-container` to remove reserved space and make the DateRangePicker more compact.
40
40
41
41
>caption Customized Blazor DateRangePicker
42
42
@@ -94,4 +94,5 @@ This KB article answers the following questions:
0 commit comments