Skip to content

Commit bf69c8d

Browse files
github-actions[bot]dimodiIvanDanchev
authored
Merge kb-dark-mode-3701 into production (#3707)
* kb(Common): Add KB for using consistent OS color mode and Telerik theme * Update knowledge-base/common-dark-mode-scrollbars.md Co-authored-by: IvanDanchev <danchev@progress.com> --------- Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> Co-authored-by: IvanDanchev <danchev@progress.com>
1 parent f319d55 commit bf69c8d

1 file changed

Lines changed: 174 additions & 0 deletions

File tree

‎knowledge-base/common-dark-mode-scrollbars.md‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
---
2+
title: Scrollbars Not Visible on Mobile Phones and Tablets
3+
description: Learn how to troubleshoot and fix a problem with hidden scrollbars in web browsers on touch devices like mobile phones and tablets.
4+
type: troubleshooting
5+
page_title: Scrollbars Not Visible on Mobile Phones and Tablets
6+
meta_title: Scrollbars Not Visible on Mobile Phones and Tablets
7+
tags: telerik, blazor, styles
8+
ticketid: 1708420
9+
res_type: kb
10+
components: ["general"]
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>UI for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
## Description
25+
26+
I have an issue with the visibility of scrollbars in Telerik Blazor components. While the scrollbars appear and function correctly in desktop browsers, they are completely hidden on mobile devices and tablets. This makes horizontal or vertical navigation through large datasets difficult for touch users.
27+
28+
## Cause
29+
30+
iOS and iPadOS use semi-transparent scrollbars and their color depends on the iOS theme:
31+
32+
* Black in light mode
33+
* White in dark mode
34+
35+
The resulting scrollbars should always be gray. However, if the operating system uses dark mode and the web app uses light mode, the native browser scrollbars become effectively invisible, because they are have a semi-transparent white color on white or light background.
36+
37+
## Solution
38+
39+
To avoid scrollbar visibility issues on iOS devices:
40+
41+
1. [Detect the operating system color mode](https://stackoverflow.com/questions/56393880/how-do-i-detect-dark-mode-using-javascript) with the help of [`matchMedia()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) and [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme).
42+
1. [Load a consistent dark or light Telerik theme](slug:common-kb-change-theme-runtime). Note that the theme switching mechanism in the example below is simplified and may not fit all scenarios.
43+
44+
>caption Use dark or light Telerik theme, depending on the operating system color mode
45+
46+
````RAZOR
47+
@inject IJSRuntime JS
48+
49+
<p>Browser DarkMode Active: <code>@IsBrowserDarkMode</code></p>
50+
51+
<TelerikGrid Data="@GridData"
52+
TItem="@Product"
53+
Width="90vw"
54+
Height="30vh">
55+
<GridColumns>
56+
<GridColumn Field="@nameof(Product.Name)" Width="40vw" />
57+
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" Width="40vw" />
58+
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" Width="40vw" />
59+
</GridColumns>
60+
</TelerikGrid>
61+
62+
<div style="display:flex;flex-wrap:wrap;gap:1em;margin-top:2em;">
63+
64+
<div class="test-div" style="background: Canvas; color: CanvasText;">
65+
Scroll me vertically or horizontally
66+
<div class="spacer"></div>
67+
</div>
68+
69+
<div class="test-div" style="background: yellow; color: black;">
70+
Scroll me vertically or horizontally
71+
<div class="spacer"></div>
72+
</div>
73+
74+
<div class="test-div" style="background: red; color: white;">
75+
Scroll me vertically or horizontally
76+
<div class="spacer"></div>
77+
</div>
78+
79+
<div class="test-div" style="background: CanvasText; color: Canvas;">
80+
Scroll me vertically or horizontally
81+
<div class="spacer"></div>
82+
</div>
83+
84+
</div>
85+
86+
<script suppress-error="BL9992">
87+
function detectDarkMode() {
88+
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
89+
}
90+
91+
function loadDarkTheme(version) {
92+
var link = document.querySelector("link[href$='-main.css']");
93+
if (link) {
94+
link.setAttribute("href", link.getAttribute("href").replace("-main.css", "-main-dark.css"));
95+
}
96+
}
97+
</script>
98+
99+
<style>
100+
.test-div {
101+
width: 40vw;
102+
height: 20vh;
103+
border: 1px solid;
104+
overflow: auto;
105+
}
106+
107+
.spacer {
108+
width: 150%;
109+
height: 150%;
110+
}
111+
112+
/* Needed only in this example and only in REPL */
113+
.main > .k-body {
114+
min-height: 100vh;
115+
}
116+
</style>
117+
118+
@code {
119+
private List<Product> GridData { get; set; } = new();
120+
121+
private bool IsBrowserDarkMode { get; set; }
122+
123+
private bool DarkModeChecked { get; set; }
124+
125+
protected override void OnInitialized()
126+
{
127+
var rnd = Random.Shared;
128+
129+
for (int i = 1; i <= 27; i++)
130+
{
131+
GridData.Add(new Product()
132+
{
133+
Id = i,
134+
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
135+
Group = $"Group {i % 3 + 1}",
136+
Price = rnd.Next(1, 100) * 1.23m,
137+
Quantity = rnd.Next(0, 10000),
138+
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
139+
Discontinued = i % 4 == 0
140+
});
141+
}
142+
}
143+
144+
protected override async Task OnAfterRenderAsync(bool firstRender)
145+
{
146+
if (firstRender && !DarkModeChecked)
147+
{
148+
DarkModeChecked = true;
149+
IsBrowserDarkMode = await JS.InvokeAsync<bool>("detectDarkMode");
150+
if (IsBrowserDarkMode)
151+
{
152+
await JS.InvokeVoidAsync("loadDarkTheme");
153+
}
154+
StateHasChanged();
155+
}
156+
}
157+
158+
public class Product
159+
{
160+
public int Id { get; set; }
161+
public string Name { get; set; } = string.Empty;
162+
public string Group { get; set; } = string.Empty;
163+
public decimal Price { get; set; }
164+
public int Quantity { get; set; }
165+
public DateTime Released { get; set; }
166+
public bool Discontinued { get; set; }
167+
}
168+
}
169+
````
170+
171+
## See Also
172+
173+
* [Change Telerik Theme at Runtime](slug:common-kb-change-theme-runtime)
174+
* [Themes Overview](slug:themes-overview)

0 commit comments

Comments
 (0)