Hello vijo,
Thank you for writing in! There are a variety of ways to handle this! In the below image you can see that in the Visual Designer, you can use the Elements tab to select off-screen elements and change values or change it's position so that it's back in view for you to work with.
- OffScreenElements.png (11.14 KiB) Viewed 406 times
Another alternative would be to use custom CSS class, which you can add to the CSS file of your Genie skin, that sets the top property to the negative value so that when displayed in Genie, using that particular skin, the element will be positioned at the new top defined in that class. Example code:
Code: Select all
.genie-moved-it {
top: -50px !important;
}
I added this to Hybrid.css using Genie Admin. The
!important keyword is necessary in order to override the in-line positioning of the element. I would then add
genie-moved-it to the
css class property of the element I want to be moved when using the Hybrid Genie skin. This solution requires that this code be added to the CSS file of all skins you want this to happen in. The Visual Designer does not automatically pull in a Genie skin's CSS file, which is why this class won't apply while in the Visual Designer.
Additionally, JavaScript can be used to move the element by adding code to the
onload event of the screen. Below is my example code:
Code: Select all
var movit = getObj("btn");
movit.style.top = "-50px";
console.log("I moved it.");
This, of course would have to be done for each object you would like to be moved.
I hope this helps! If you have any questions or concerns, please let us know!
