# Weird rectangles on top of dashboard (on touch screen)

**URL:** <https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316>\
**Category:** Dashboard\
**Created:** [24 September 2020 22:58 UTC](https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316 "2020-09-24T22:58:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [24 September 2020 22:58 UTC](https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316/1 "2020-09-24T22:58:43Z")

</div>

Hi folks,

I'm experimenting with the Node-RED dashboard on a small chinese LCD touch screen (attached to a Raspberry Pi Zero Wifi). It is working fine except from 1 problem: frequently white rectangles appear on top of my dashboard:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/040fdc327781d350db6ccd6253c771f1b3fb5ae2.jpeg)

In this case:

1. I enter numbers "21" via buttons that I show on my '_ **keypad** _' dashboard.
2. Those numbers "21" are being displayed in the upper side of the screen.
3. Then I (accidentally) touch the "1" (in the upper side of the screen), so the "1" become 'selected.
4. From then on the large white rectangles appear whenever I touch the screen.

Since the dashboard is running on Chromium (on the RPI Zero), I could easily do _ **remote debugging** _ from my Windows portable. But in Chrome on my Windows portable I don't see the white artifacts (and at the same moment they are visible on the touch screen that I'm debugging...):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/d/ed12ef06745c4f444dba84f4e390621d7cfd9cbf.jpeg)

Since the number "1" is displayed inside the white rectangle, I assume that it is somehow related with that... So I changed the background color of the numbers paragraph yellow, but the rectangle still stays white. \*\*\* I get the impression that the grey selection rectangle (see around "1" in the emulator) somehow gets enlarged on the touch screen ...\*\*\*\* But I'm just guessing ...

To make sure the numbers cannot be selected, I added some CSS to that html paragraph:

```auto
/* See https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable */
.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

```

That seems to work, but now I get white rectangles from time to time when I click the buttons...

Since I don't get problem in the emulator, I have no clue what might be causing this. Is it Chromium, is it AngularJs, is it the touchscreen, is it ...?

Does anybody can provide me some tips of things I could try? Because I cannot make the buttons 'unselectable' as you might understand ....

Getting nuts of this kind of problems 🥴 🥴 🥴  
Thanks !!!  
Bart

---

<div class="post-metadata">

**Author:** ![janvda](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/janvda/32/234_2.png) [@janvda](https://discourse.nodered.org/u/janvda)\
**Post date:** [25 September 2020 11:45 UTC](https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316/2 "2020-09-25T11:45:30Z")

</div>

Maybe you could try with a different browser (firefox ?) on the RPI Zero ?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [25 September 2020 14:49 UTC](https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316/3 "2020-09-25T14:49:29Z")

</div>

Hi Jan,

Thanks!! That is indeed something I could use as a plan B, if everything else fails on Chromium.

- I had seen on the www that white rectangle also appear in Chromium with gpu acceleration and some extensions (like e.g. Adblock). So I tried to start Chromium with some extra settings:

- Just found out that it happens in the following sequence:

Therefore I have also applied the `unselectable` (see above) CSS style to the status text (just like I had already applied it to the keycode text):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/4/f4ce5b94ce5a07c47f2e3af3187975b7e9b000c6.png)

I have been testing the keypad for a few minutes and it didn't fail anymore.  
So hopefully it is now solved with the CSS class on both two fields at the top of my dashboard.  
Fingers crossed 🤞

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 October 2020 14:49 UTC](https://discourse.nodered.org/t/weird-rectangles-on-top-of-dashboard-on-touch-screen/33316/4 "2020-10-25T14:49:38Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.