diff --git a/awx/ui/client/index.template.ejs b/awx/ui/client/index.template.ejs
index c8d4e0d758..146d3290d7 100644
--- a/awx/ui/client/index.template.ejs
+++ b/awx/ui/client/index.template.ejs
@@ -19,7 +19,7 @@
-
+
diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less
index 552c0151bc..c7d283bedd 100644
--- a/awx/ui/client/src/network-ui/network-nav/network.nav.block.less
+++ b/awx/ui/client/src/network-ui/network-nav/network.nav.block.less
@@ -1,3 +1,11 @@
+.NetworkingUIView{
+ position:absolute;
+ display:block;
+ width:100vw;
+ height: 100vh;
+ z-index: 1101;
+}
+
.Networking-shell{
display:flex;
flex-direction: column;
diff --git a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js
index 820ed7e37d..fba7aa1058 100644
--- a/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js
+++ b/awx/ui/client/src/network-ui/network-nav/network.nav.controller.js
@@ -5,7 +5,7 @@ function NetworkingController (models, $state, $scope, strings) {
const {
inventory
} = models;
-
+ vm.networkUIisOpen = true;
vm.strings = strings;
vm.panelTitle = `${strings.get('state.BREADCRUMB_LABEL')} | ${inventory.name}`;
vm.hostDetail = {};
@@ -16,6 +16,7 @@ function NetworkingController (models, $state, $scope, strings) {
vm.groups = [];
$scope.devices = [];
vm.close = () => {
+ vm.networkUIisOpen = false;
$scope.$broadcast('awxNet-closeNetworkUI');
$state.go('inventories');
};
diff --git a/awx/ui/client/src/network-ui/network.ui.controller.js b/awx/ui/client/src/network-ui/network.ui.controller.js
index 7f324988c7..8e753e4e19 100644
--- a/awx/ui/client/src/network-ui/network.ui.controller.js
+++ b/awx/ui/client/src/network-ui/network.ui.controller.js
@@ -550,6 +550,13 @@ var NetworkUIController = function($scope,
if (originalEvent.wheelDeltaY !== undefined) {
$event.deltaY = $event.originalEvent.wheelDeltaY;
}
+ if (originalEvent.deltaX !== undefined) {
+ $event.deltaX = $event.originalEvent.deltaX;
+ }
+ if (originalEvent.deltaY !== undefined) {
+ $event.deltaY = $event.originalEvent.deltaY;
+ $event.delta = $event.originalEvent.deltaY;
+ }
}
};