Community Tip - Your Friends List is a way to easily have access to the community members that you interact with the most! X
First of all I would like to thank the community for continuous support.
Returning to the question:-
When I place a 2D widget in the left panel at a particular place then I am not able to place any other 2D widget at the same location.
I searched the community an found little piece of info about it from this thread :
But even after using that i was just able to hide the widgets from that place only during design time.
Is there any proper solution to this?
It would be of great help if someone could attach a sample project which could help to rectify the problem.
Solved! Go to Solution.
Hello vivekse,
In order to achieve the overlapping 2D widgets effect shown in the video that you shared, you will first need to add 3 widgets as children of the 2D Overlay:
Then, you will need to customize the style of your widgets by adding some css code in the Application file that can be found under the Styles tab. It can be something like this:
.ControlPanel {
position: fixed;
right: 0;
top: 0;
bottom: 50px;
width: 300px;
background: rgba(0, 0, 0, 0.5) !important;
}
.OpenImage {
position: fixed;
top: 0;
right: 0;
}
.CloseImage {
position: fixed;
top: 0;
right: 0;
}
And also, you will need to add some functionalities to the OpenImage and CloseImage widgets (theyvwill act as buttons that open and close the ControlPanel). In order to do that, you can add something similar to this Javascript code in the Home.js file.
$scope.$on("$ionicView.afterEnter", function (event) {
document.querySelector('.ControlPanel').style.display = 'inline';
$scope.view.wdg['OpenImage']['visible'] = true;
$scope.view.wdg['CloseImage']['visible'] = false;
});
$scope.ShowHidePanel = function() {
if ($scope.view.wdg['CloseImage']['visible'] == false) {
$scope.view.wdg['CloseImage']['visible'] = true;
$scope.view.wdg['OpenImage']['visible'] = false;
document.querySelector('.ControlPanel').style.display = 'none';
} else {
$scope.view.wdg['CloseImage']['visible'] = false;
$scope.view.wdg['OpenImage']['visible'] = true;
document.querySelector('.ControlPanel').style.display = 'inline';
}
};
The last thing you need to do is to add the text ShowHidePanel(); in the Javascript box of the OpenImage and CloseImage.
I hope this was useful.
Kind regards,
Lorena
Also in this video :
we can see that in the right panel a blue button is placed which when clicked open up a menu of options which is also on the right panel. Now my doubt is how he made that possible because when the person would have placed that blue button in the right panel then he would no longer be able to place the those menu buttons in the same panel.
Hello vivekse,
In order to achieve the overlapping 2D widgets effect shown in the video that you shared, you will first need to add 3 widgets as children of the 2D Overlay:
Then, you will need to customize the style of your widgets by adding some css code in the Application file that can be found under the Styles tab. It can be something like this:
.ControlPanel {
position: fixed;
right: 0;
top: 0;
bottom: 50px;
width: 300px;
background: rgba(0, 0, 0, 0.5) !important;
}
.OpenImage {
position: fixed;
top: 0;
right: 0;
}
.CloseImage {
position: fixed;
top: 0;
right: 0;
}
And also, you will need to add some functionalities to the OpenImage and CloseImage widgets (theyvwill act as buttons that open and close the ControlPanel). In order to do that, you can add something similar to this Javascript code in the Home.js file.
$scope.$on("$ionicView.afterEnter", function (event) {
document.querySelector('.ControlPanel').style.display = 'inline';
$scope.view.wdg['OpenImage']['visible'] = true;
$scope.view.wdg['CloseImage']['visible'] = false;
});
$scope.ShowHidePanel = function() {
if ($scope.view.wdg['CloseImage']['visible'] == false) {
$scope.view.wdg['CloseImage']['visible'] = true;
$scope.view.wdg['OpenImage']['visible'] = false;
document.querySelector('.ControlPanel').style.display = 'none';
} else {
$scope.view.wdg['CloseImage']['visible'] = false;
$scope.view.wdg['OpenImage']['visible'] = true;
document.querySelector('.ControlPanel').style.display = 'inline';
}
};
The last thing you need to do is to add the text ShowHidePanel(); in the Javascript box of the OpenImage and CloseImage.
I hope this was useful.
Kind regards,
Lorena