How can I create a keyboard component in bbc/tal

Question

I am trying to create a keyboard component in bbc/tal but unfortunately it is not working. I could not find any examples for this on the internet. I hope someone can help me on this.

The below code I have used to create component.

 var myVirtualKeyBoard = new Keyboard("keyboard",10,3,"abcdefghijklmnopqrstuvwxyz",true,true);

 myVirtualKeyBoard.setActiveChildKey('A')
 this.appendChildWidget(myVirtualKeyBoard);

It is showing 10* 3 buttons row by row but i couldn't get a keyboard in the display

Answer 1

The issue was related to css styling. We can use the below code to display the keyboard.

Js sampe code

keys = ['SPACE','A','B','C','D','E','F','G','H','I','1','2','3','SPACE','DEL','J','K','L','M','N','O','P','Q','R','4','5','6','DEL',' ','S','T','U','V','W','X','Y','Z',' ','7','8','9','0'];
keyboard = new Keyboard("Keyboard", 14, 3 ,keys, true , true);
keyboard.setActiveChildKey('A');
this.appendChildWidget(keyboard);

Css

#testcomponent {
display: table;
width: 100%;
height: 100%;
text-align: center;
}

Keyboard Component
#Keyboard {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: middle;
}

Single Keyboard Style Changed
.keyboardButton {
display: inline-block;
}