Skip to content

Commit 27c3ea5

Browse files
Add KB article on resizing the popup of the DatePicker (#134)
* chore(kb): initial commit * chore(kb): improvements to kb article * chore(kb): minor wording improvements * chore(kb): improve example headers * chore(kb): fix wording * chore(kb): minor wording improvement Co-authored-by: Marin Bratanov <[email protected]>
1 parent be9d9f1 commit 27c3ea5

4 files changed

+86
-0
lines changed
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
---
2+
title: Increase the size of the DatePicker's popup to fit the content
3+
description: How to increase the size of the DatePicker's popup to fit the content
4+
type: how-to
5+
page_title: Increase the size of the DatePicker's popup to fit the content
6+
slug: datepicker-kb-resize-popup
7+
position:
8+
tags:
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>DatePicker for Blazor, Calendar for Blazor</td>
18+
</tr>
19+
</tbody>
20+
</table>
21+
22+
23+
## Description
24+
25+
I am using the Bootstrap theme and the popup resizes when I navigate between the months. This cases the navigational arrows to be displaced so I cannot click on them repeatedly.
26+
27+
>caption The popup of the DatePicker is resized based on month's name length. Problematic example.
28+
29+
![DatePicker popup resizing gif](images/datepicker-popup-resizing-problematic-example.gif)
30+
31+
## Cause
32+
33+
The Bootstrap theme has a larger font size which causes long month names to take up more space than in other themes. For example, the month of September is long and pushes the layout of the popup to be wider, which, in turn, changes its width and the relative position of the next/prev arrows to the mouse.
34+
35+
36+
## Solutions
37+
38+
There are two possible solutions:
39+
40+
* [Use the PopupWidth parameter](#use-the-popupwidth-parameter)
41+
* [Use CSS to reduce the font size of the months name](#use-css-to-reduce-the-font-size-of-the-months-name)
42+
43+
### Use the PopupWidth parameter
44+
45+
You can control the popup width for the DatePicker by using the `PopupWidth` parameter that the components exposes. You can set it in `pixels` or any other valid CSS dimensions to fit the content of the popup.
46+
47+
48+
````CSHTML
49+
<TelerikDatePicker @bind-Value="datePickerValue" PopupWidth="300px"></TelerikDatePicker>
50+
51+
@code {
52+
DateTime datePickerValue { get; set; } = DateTime.Now;
53+
}
54+
````
55+
56+
>caption The result from the code snippet above
57+
58+
![fit the content of the popup](images/datepicker-popup-resizing-fit-content-example.gif)
59+
60+
### Use CSS to reduce the font size of the months name
61+
62+
This example utilizes CSS to reduce the font-size of the month's name in the dropdown of the DatePicker. This solution might also be applied to the Telerik Calendar component for Blazor.
63+
64+
>note If you are using it for the Calendar component you can pass a custom CSS class to the `Class` parameter of the Calendar and cascade the styles through that class.
65+
66+
````CSHTML
67+
<style>
68+
.k-calendar .k-calendar-header .k-title.k-button {
69+
font-size: 10px;
70+
}
71+
</style>
72+
73+
<TelerikDatePicker @bind-Value="datePickerValue" Class="myDatePicker"></TelerikDatePicker>
74+
75+
@code {
76+
DateTime datePickerValue { get; set; } = DateTime.Now;
77+
}
78+
````
79+
80+
>caption The result from the code snippet above
81+
82+
![fit the content of the popup using CSS](images/datepicker-popup-resizing-fit-content-css-example.gif)
83+
84+
85+
86+
Loading
Loading
Loading

0 commit comments

Comments
 (0)