diff --git a/guacamole/src/main/webapp/app/client/styles/keyboard.css b/guacamole/src/main/webapp/app/client/styles/keyboard.css
index 270153a4d..665301f68 100644
--- a/guacamole/src/main/webapp/app/client/styles/keyboard.css
+++ b/guacamole/src/main/webapp/app/client/styles/keyboard.css
@@ -23,9 +23,6 @@
.keyboard-container {
text-align: center;
- position: fixed;
- left: 0;
- bottom: 0;
width: 100%;
margin: 0;
padding: 0;
@@ -34,10 +31,5 @@
background: #222;
opacity: 0.85;
- visibility: hidden;
z-index: 1;
}
-
-.keyboard-container.shown {
- visibility: visible;
-}
diff --git a/guacamole/src/main/webapp/app/client/templates/client.html b/guacamole/src/main/webapp/app/client/templates/client.html
index 88abf2dc7..9bc5776db 100644
--- a/guacamole/src/main/webapp/app/client/templates/client.html
+++ b/guacamole/src/main/webapp/app/client/templates/client.html
@@ -43,14 +43,15 @@
+
+
+
+
+
-
-
-
-
diff --git a/guacamole/src/main/webapp/app/osk/directives/guacOsk.js b/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
index f8891e437..b9ee43963 100644
--- a/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
+++ b/guacamole/src/main/webapp/app/osk/directives/guacOsk.js
@@ -57,6 +57,13 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
*/
var main = $element[0];
+ /**
+ * The element which functions as a detector for size changes.
+ *
+ * @type Element
+ */
+ var resizeSensor = $element.find('.resize-sensor')[0];
+
/**
* Event listener which resizes the current keyboard, if any, such
* that it fits within available space.
@@ -73,8 +80,10 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
$scope.$watch("layout", function setLayout(layout) {
// Remove current keyboard
- keyboard = null;
- main.innerHTML = "";
+ if (keyboard) {
+ main.removeChild(keyboard.getElement());
+ keyboard = null;
+ }
// Load new keyboard
if (layout) {
@@ -96,18 +105,13 @@ angular.module('osk').directive('guacOsk', [function guacOsk() {
$rootScope.$broadcast('guacSyntheticKeyup', keysym);
};
- // Resize keyboard whenever window changes size
- $window.addEventListener('resize', resizeListener);
+ // Resize keyboard whenever element changes size
+ resizeSensor.contentWindow.addEventListener('resize', resizeListener);
}
}); // end layout scope watch
- // Clean up event listeners upon destroy
- $scope.$on('$destroy', function destroyKeyboard() {
- $window.removeEventListener('resize', resizeListener);
- });
-
}]
};
diff --git a/guacamole/src/main/webapp/app/osk/styles/osk.css b/guacamole/src/main/webapp/app/osk/styles/osk.css
index ae5d26bf9..c36d40629 100644
--- a/guacamole/src/main/webapp/app/osk/styles/osk.css
+++ b/guacamole/src/main/webapp/app/osk/styles/osk.css
@@ -20,6 +20,18 @@
* THE SOFTWARE.
*/
+.osk .resize-sensor {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ overflow: hidden;
+ border: none;
+ opacity: 0;
+ z-index: -1;
+}
+
.guac-keyboard {
display: inline-block;
width: 100%;
diff --git a/guacamole/src/main/webapp/app/osk/templates/blank.html b/guacamole/src/main/webapp/app/osk/templates/blank.html
new file mode 100644
index 000000000..62b9f6aa2
--- /dev/null
+++ b/guacamole/src/main/webapp/app/osk/templates/blank.html
@@ -0,0 +1,22 @@
+
+
diff --git a/guacamole/src/main/webapp/app/osk/templates/guacOsk.html b/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
index 42a73462c..e541dc64b 100644
--- a/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
+++ b/guacamole/src/main/webapp/app/osk/templates/guacOsk.html
@@ -21,4 +21,7 @@
THE SOFTWARE.
-->
+
+
+