[BUG] - Specialcharacters keyboard close button is not visible when kioskboard-overflow class present

[revaij83]

Describe the bug

When special characters are enabled and the keyboard's height takes up more then 2/3 of the window's height the close button of the specialcharacters window is not visible.

Steps to reproduce

1. Setup a keyboard with special characters enabled.
2. Open the keyboard in a window resized so that the keyboard takes up more than 2/3 of the window height. If you initially opened a higher window and then resized it, refresh the browser.
3. Activate the special characters on the keyboard.

Result: Special characters Close button not visible.

Expected behavior

Special characters close button should be always visible when special characters are activated.

Screenshots

Additional context

This was an issue for us on ipad mini 1024x768 for us, see screenshot. The issue came from these lines in kioskboard.js:

    // check window and keyboard height: begin
    var windowHeight = Math.round(window.innerHeight);
    var documentHeight = Math.round(window.document.body.clientHeight);
    var keyboardHeight = Math.round(window.document.getElementById(kioskBoardVirtualKeyboard.id).offsetHeight);
    if (keyboardHeight > Math.round((windowHeight / 3) * 2)) {
      var keyboardWrapper = window.document.getElementById(kioskBoardVirtualKeyboard.id).getElementsByClassName('kioskboard-wrapper')[0];
      keyboardWrapper.style.maxHeight = Math.round((windowHeight / 5) * 4) + 'px';
      keyboardWrapper.style.overflowX = 'hidden';
      keyboardWrapper.style.overflowY = 'auto';
      keyboardWrapper.classList.add('kioskboard-overflow');
    }

On the above screenshot the keyboard took up more than 2/3 of the screen but less than 4/5. So even though the kioskboard-overflow class and the additional styles were added by the above lines, there is no scrollbar visible on the screenshot. But since overflow-y is not set to "visible" anymore and the absolutely positioned special characters close button's top is set to -42.5px, the button is not visible anymore as it's outside of the boundaries of the relatively positioned kioskboard-wrapper div.

As a workaround (not a fix) I've added this css rule:
#KioskBoard-VirtualKeyboard .kioskboard-wrapper.kioskboard-overflow .kioskboard-row-specialcharacters span.kioskboard-specialcharacter-close {
top:0 !important;
}

This forced the closebutton back into the kioskboard-wrapper's visible area:

[furcan]

https://github.com/furcan/KioskBoard/releases/tag/v2.3.0