Css Html Hiding A Field From Screen's Right

I positioned a form to the right of a document showing only a part of it

Copy

to the body rule.

Edit: You could do this:

body {
height: 100%;
width: 100%;
}
.right-form {
position:absolute;  
right: 0;
width: 30px;
overflow: hidden;
transition: width 0.5s ease;
}
.right-form:hover {
width: 250px;
}

Instead of changing the right value I have changed the width of the form and did the overflow on the form instead on the body. Now you cannot use the arrow keys anymore to display the form when not hovering.

Solution 2:

Usage of overflow does still allow the usage of arrow keys.. You can kill the usage of arrow keys like this:

$(document).keydown(function(event) {
     switch(event.keyCode){
        case37:
        case39:
            returnfalse;
            break;
     }
 });

Solution 3:

Use the below code, the 100% + the default margin is causing the issue

body{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
}

.right-form{
     position:absolute;
     rigth: -220px;
     width: 250px
     transition: width 0.5s ease 0s, right 0.5s ease 0s;
}
.right-form:hover{
     right: 0px;
}