Our new website (legendboats.com) has a slide out Feedback form hidden on the right side. However, if you are on an iPad, or Laptop with a touchpad, you can scroll to the right and reveal the form. I have set the overflow-x to hidden, but it still appears. Does anyone know how to hide this for all devices?
Have you tried making it position absolute or position fixed and positioning it off screen? That should work.
That’s how it’s currently done now.
oh sorry I should of looked first. Can you try overflow hidden on the body instead of the html. other than that I’d be googling myself.
Tried that too 
Still not work Chris sad
I think anything you place off screen the ipad will try and scale to that size. You would be better of setting the element at right:0 and animate the width instead.
e.g.
$target = $("#feedback");
$target.find("h5").click(function () {
if ($target.hasClass("active")) {
$target.animate({
width: "-=360"
}, 500).removeClass("active");
} else {
$target.animate({
width: "+=360"
}, 700).addClass("active");
}
});
#feedback {
position: absolute;
top: 310px;
right:0;
height: 310px;
width:33px;
overflow:hidden;
}
.inner {
height: 310px;
background: #fefefe;
overflow:hidden;
width:360px;
margin-left:33px;
-webkit-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);
box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.3);
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-radius-bottomleft: 10px;
}
#feedback h5 {
position:absolute;
left:0;
top:0;
width: 33px;
height: 187px;
background: url("http://legendboats.com/images/en/feedback.png") no-repeat;
text-indent: -9999px;
cursor: pointer;
}
<div id="feedback">
<h5>Share Your Feedback</h5>
<div class="inner">
<h6>Give Us Your Feedback</h6>
<form method="post" action="/en/welcome/feedback">
<div>
<label for="mail_form[full_name]">Name</label>
<input type="text" id="mail_form_full_name" name="mail_form[full_name]">
</div>
<div>
<label for="mail_form[email]">Email</label>
<input type="text" id="mail_form_email" name="mail_form[email]">
</div>
<div>
<label for="mail_form[comments]">Feedback</label>
<textarea id="mail_form_comments" name='mail_form[comments]'></textarea>
</div>
<div>
<input type="submit" value="Submit Feedback" onclick='return validate();'>
</div>
</form>
</div>
</div>
That works for me.
Ok a couple more ideas. Try overflow hidden on a div with a width just to rule out overflow hidden non support. Bascally the iPad is including that box in the whole screen. Have you tried position fixed? Maybe ios won’t treat that the same when it’s off screen.
Position:fixed isn’t supported on the ipad (yet) Eric 
Maybe I dreamt it but position fixed is/was supported on my iPhone via ios 5 update. I assumed that meant iPad too?
Yeah here is a write up on it http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5
Yes it was recently added to ios5 but it will be a while before its safe to use.
Being an avid apple toy guy myself (although yet to buy a Mac) apple guys are sort of like opera guys I’d imagine. They update quick. Plus they have too. Apps, devices, etc quickly become painful to operate with old iOS’s. And each iOS update is considered almost getting a new phone. Another reason why they update quick.
I bought my wide the ipad2 for Christmas and fixed positioning works ok on that. I’m not sure ipad users can update so easily from remarks I’ve seen.
I think your suggestion should work ok for the newer devices though and changing #feedback to position:fixed should work.
#feedback {
position: fixed;
}
The other method I mentioned above should work for all though (with any luck)