Use virtual keyboard in node-red-dashboard



I think you are right. I managed to change the layout to "numbers only" and I figured out how to change the position (in "Z" plane). I'm almost certain that the issue is related to the position and the size of the keyboard.
Any tips what I should do to change the size?
I also want to change the Enter button functionality and label. I want this button to close Keyboard and change label to "BACK"
Thank you for your help.


To change the size look for css width and height. I don't think its causing the flicker though.
To close the keyboard, you could change the ENTER button to display BACK and change the beahavior to: = "none", but there should be no need to, as you can close the keyboard by either clicking the X button in the top right corner or by clicking anywhere on the dimmed dashboard outside the keyboard box.


I've updated the flow so that the keyboard should always be centered, no matter your screen resolution or browser window size.



Thank you very much for your help.

Thanks to your tips I was able to modify the keyboard, and it is working for me now.
I know now how to change the position, layout, colour and size of the keyboard.

There is one last thing that bothers me, which is a grey area outside the keyboard (I'm referring to the box outside the keyboard that you can click on to close it). How I can resize it.


This grey area is called modal ( compared to modal-content for the actual keyboard area) and is supposed to be full-screen ( width: 100%, height 100%). If you want tou can set the modal-content's position to absolute instead of relative so that changing one will not impact the other.


I just updated the flow to automatically detect the input type (number or text) in order to display the right keyboard layout.


Thank you for your support. I appreciate your help.
I was able to modify the keyboard to my needs and it's working on the 7" touchscreen now.


My pleasure! I'm glad you got it working to your liking.


What is the best way to capture this for next time ? or...?


Right now it is updated on the link to it could be marked as solution so that others can try it before trying to piece it together from code snippets scattered in the thread. If there is enough demand, it could be made into a contrib-ui node.


Hey @hugobox, I think this might an interesting use case for a custom ui node... Especially if you would have some settings on the config screen, so users could customize it. Let us know if you need any support, if you ever would consider building it!


I have imported your flow, but no keyboard opens, or is it intentional that no laptop will appear on the laptop. No matter if I turn the keyboard on or off with the button


Hi @Tobi! The virtual keyboard only opens when you click in a text field, if that doesn't work, please state your version of node-red and dashboard, and which browser (and version) you are using.


I use node-red version v.0.19.5 and dashboard v2.12.2
the browser is firefox 60.4.0esr (64-Bit)


Do you see any error in the browser console? Does it work in chrome? Is your text field in a ui-text or ui-template node?


In the browser console the following error appear:

ReferenceError: event is not defined[Weitere Informationen]

In microsoft edge and chrome it works


Ok I tried with Firefox 64.0 and the keyboard appears without error. Hopefully fixes it for you as well.