Skip to content

Commit a037adb

Browse files
Tsvetomir-Hrradkostanev
authored andcommitted
docs(DateRangePicker): apply suggestions
1 parent 5a52adc commit a037adb

File tree

1 file changed

+7
-6
lines changed

1 file changed

+7
-6
lines changed

knowledge-base/daterangepicker-css-customization.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@ res_type: kb
2424

2525
This KB article answers the following questions:
2626

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?
2929
* How to reduce the width of the two DateInputs?
3030
* How to prevent horizontal expansion of the DateRangePicker?
3131
* How to hide the Start and End labels of the DateRangePicker?
3232
* How to make the DateRangePicker more compact?
3333

3434
## Solution
3535

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.
4040

4141
>caption Customized Blazor DateRangePicker
4242
@@ -94,4 +94,5 @@ This KB article answers the following questions:
9494
````
9595

9696
## See Also
97+
9798
* [DateRangePicker Overview]({%slug daterangepicker-overview%})

0 commit comments

Comments
 (0)